CSS-Tricks·5yLet’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.
CSS-Tricks·5yHow 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.
CSS-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.
CSS-Tricks·5yA 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.
CSS-Tricks·5yFigma 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.
CSS-Tricks·5ySome 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.
CSS-Tricks·5yUse 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.
CSS-Tricks·5yAnimating 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.
CSS-Tricks·5yA 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.