<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/sources/css_tricks/best-of/2021/02" -->

---
title: Best CSS-Tricks posts — February 2021 | daily.dev
description: The most upvoted CSS-Tricks posts from February 2021, curated by the daily.dev community.
canonical: https://daily.dev/sources/css_tricks/best-of/2021/02
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:url: https://daily.dev/sources/css_tricks/best-of/2021/02
og:type: website
og:site_name: daily.dev
og:title: Best CSS-Tricks posts — February 2021 | daily.dev
og:description: The most upvoted CSS-Tricks posts from February 2021, curated by the daily.dev community.
og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph
---

# Best of CSS-Tricks — February 2021

1. 1  
[](https://daily.dev/posts/let-s-create-a-custom-audio-player-prt3lc6ww "Let’s Create a Custom Audio Player")  
Article  
![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 6y  
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.  
43  
3
2. 2  
[](https://daily.dev/posts/how-to-create-a-shrinking-header-on-scroll-without-javascript-oevpab8fg "How to Create a Shrinking Header on Scroll Without JavaScript")  
Article  
![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 6y  
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.  
43  
3
3. 3  
[](https://daily.dev/posts/cancelable-smooth-scrolling-f8exn7vc9 "“Cancelable” Smooth Scrolling")  
Article  
![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 6y  
“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.  
38  
6
4. 4  
[](https://daily.dev/posts/a-dry-approach-to-color-themes-in-css-q0jnjzmjr "A DRY Approach to Color Themes in CSS")  
Article  
![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 6y  
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.  
36  
4
5. 5  
[](https://daily.dev/posts/figma-crash-course-wamftqlbp "Figma Crash Course")  
Article  
![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 6y  
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.  
28  
2
6. 6  
[](https://daily.dev/posts/some-react-blog-posts-i-ve-bookmarked-and-read-lately--al7u6ywe "Some React Blog Posts I’ve Bookmarked and Read Lately")  
Article  
![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 6y  
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.  
23
7. 7  
[](https://daily.dev/posts/progressive-web-apps-in-2021-tehki8bzg "Progressive Web Apps in 2021")  
Article  
![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 6y  
Progressive Web Apps in 2021  
22  
5
8. 8  
[](https://daily.dev/posts/use-css-variables-instead-of-react-context-gbslp5emk "Use CSS Variables instead of React Context")  
Article  
![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 6y  
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.  
20  
1
9. 9  
[](https://daily.dev/posts/animating-a-css-gradient-border-z3mfxlkdx "Animating a CSS Gradient Border")  
Article  
![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 6y  
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.  
19  
1
10. 10  
[](https://daily.dev/posts/a-table-with-both-a-sticky-header-and-a-sticky-first-column-z39bc29ac "A table with both a sticky header and a sticky first column")  
Article  
![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 6y  
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.  
18  
1

[See all CSS-Tricks archives](/sources/css%5Ftricks/best-of)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/css_tricks/best-of/2021/02#page","url":"https://daily.dev/sources/css_tricks/best-of/2021/02","name":"Best CSS-Tricks Posts — February 2021","description":"The most upvoted CSS-Tricks posts from February 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/css_tricks/best-of/2021/02#items","numberOfItems":10,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/let-s-create-a-custom-audio-player-prt3lc6ww","name":"Let’s Create a Custom Audio Player"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/how-to-create-a-shrinking-header-on-scroll-without-javascript-oevpab8fg","name":"How to Create a Shrinking Header on Scroll Without JavaScript"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/cancelable-smooth-scrolling-f8exn7vc9","name":"“Cancelable” Smooth Scrolling"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/a-dry-approach-to-color-themes-in-css-q0jnjzmjr","name":"A DRY Approach to Color Themes in CSS"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/figma-crash-course-wamftqlbp","name":"Figma Crash Course"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/some-react-blog-posts-i-ve-bookmarked-and-read-lately--al7u6ywe","name":"Some React Blog Posts I’ve Bookmarked and Read Lately"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/progressive-web-apps-in-2021-tehki8bzg","name":"Progressive Web Apps in 2021"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/use-css-variables-instead-of-react-context-gbslp5emk","name":"Use CSS Variables instead of React Context"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/animating-a-css-gradient-border-z3mfxlkdx","name":"Animating a CSS Gradient Border"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/a-table-with-both-a-sticky-header-and-a-sticky-first-column-z39bc29ac","name":"A table with both a sticky header and a sticky first column"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/css_tricks/best-of"},{"@type":"ListItem","position":5,"name":"February 2021"}]}]}
```