Best of CSS-TricksFebruary 2021

  1. 1
    Article
    Avatar of css_tricksCSS-Tricks·5y

    Let’s Create a Custom Audio Player

    HTML has a built-in native audio player interface that we get simply using the <audio> element. We get to specify multiple files for better browser support, as well as a little CSS flexibility to style things up. Lottie is a library that renders Adobe After Effects animations natively.

  2. 2
    Article
    Avatar of css_tricksCSS-Tricks·5y

    How to Create a Shrinking Header on Scroll Without JavaScript

    Sticky headers are a way to shrink a website’s header without using JavaScript. The inner container contains all the header elements, such as the logo and the navigation. The outer container is in a way the actual header, while the only function of the parent element is to make the header taller.

  3. 3
    Article
    Avatar of css_tricksCSS-Tricks·5y

    “Cancelable” Smooth Scrolling

    I’m finding some discrepancies between browsers, as well as between CSS and JavaScript on how this all works. Here’s what I experienced on the browsers I have easy access to: Chrome, Firefox, Safari and Edge. I find the cancellable behavior better UX, although I have no data to back that up.

  4. 4
    Article
    Avatar of css_tricksCSS-Tricks·5y

    A DRY Approach to Color Themes in CSS

    The goal of DRY (Don’t Repeat Yourself) programming is to avoid redefining custom properties when switching between light and dark modes. Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations. I remembered Lea Verou’s trick using --var: ; , and found a way to make it work.

  5. 5
    Article
    Avatar of css_tricksCSS-Tricks·5y

    Figma Crash Course

    Lessons in use cases of Figma's resizing and stacking engine for dynamic design. Create illustrations and then turn them into reusable doodles. Available in 2021. Chapters, Animation & Prototyping Examples of different prototypes and interactions with various lessons. Available from 2021.

  6. 6
    Article
    Avatar of css_tricksCSS-Tricks·5y

    Some React Blog Posts I’ve Bookmarked and Read Lately

    React is the web's most popular framework. Frontend Masters has the best courses on the web for React. Includes a complete learning course from the best teachers in JavaScript. Wanna learn React deeply? Take our React deep learning course. Back to Mail Online home. back to the page you came from.

  7. 7
    Article
    Avatar of css_tricksCSS-Tricks·5y

    Progressive Web Apps in 2021

  8. 8
    Article
    Avatar of css_tricksCSS-Tricks·5y

    Use CSS Variables instead of React Context

    In this article, we'll look at a simple example of "Dark Mode" and compare differences in API (developer experience) and performance (user experience) We'll be using emotion's styled utility. Keep in mind that with the Theme Provider you can consume the values using the useTheme hook, or with the css prop.

  9. 9
    Article
    Avatar of css_tricksCSS-Tricks·5y

    Animating a CSS Gradient Border

    Stephanie Eckles has revived the use of CSS border-image to create Gradient Borders in CSS. The most simple usage is to set some type of CSS gradient as the border. To animate the border gradient you’ll need to add an angle in there — using a Custom Property.

  10. 10
    Article
    Avatar of css_tricksCSS-Tricks·5y

    A table with both a sticky header and a sticky first column

    A table that is sticky needs to have a background, because otherwise we’ll see overlapping content. It also needs proper z-index handling so that when it sticks in place, it’s on top of what it is supposed to be. Make sure the thead>th:first-child cell is the very highest, as it needs to be above the body cells.