1. How well do you know CSS selectors?
Front-end and WordPress developer Paulina Hetman aka PeHaa shares a series of three quizzes around CSS selectors and explains her process of teaching web development. In the example above your task is to decide whether the selector targets exactly the highlighted element. Choosing the right selector and understanding the cascade, inheritance, and specificity is crucial, PeHaa says, as often you need to override existing styles and you don’t have control over the HTML structure.
2. Animating SVG with CSS
Hope Armstrong, a product designer at Treehouse, has written an article demonstrating why the simple combination of SVG and CSS is appealing and how to make these lightweight, scalable animations! There are various CodePens, including the melting popsicle above, which Hope animated by changing the position of the drops using
transform: translate. To make them disappear, she animated the
3. Figuring out CSS Animation Properties with a Magic Kittencorn
Chen Hui Jing builds and animates the unofficial mascot of SingaporeCSS and explains the basics of CSS and SVG animation.
4. Animate a Blob of Text with SVG and Text Clipping
5. Color this sofa! – SVG + Blend Mode trick
Kyle Wetton has created an amazing demo that lets you colour a sofa using some smart SVG and CSS blend mode trickery. Take the PNG of an object, save it as a specific size, draw an SVG vector around the section you want to colour change, photoshop this section of the PNG white, and keep the blank space. Stack these in CSS, and set the blend mode of the SVG to multiply, then simply change out the fill colour.
6. Using CSS Custom Properties to Wrangle Variations in Keyframe Animations
In this article over at CSS Tricks, front-end developer Sandrina Pereira explains how CSS keyframes work and how we can enhance them with CSS and a touch of custom properties aka CSS variables. Also see Mauricio Palma’s article on Getting Started with CSS Variables here on the Heart Internet blog as well as Val Head’s post on Animating with CSS Variables, which also includes some ways to combine CSS custom properties and keyframe animations.
7. Dynamic SVG Animation with CSS Variables
Lisi Linhart has written a terrific tutorial on how to make an SVG animation with speech recognition that changes colour based on CSS variables and use it alongside animation library GSAP. Also check out Lisi’s developer’s guide to native web animation and watch her Pixel Pioneers talk on Practical Web Animation (and see the slides and CodePens she created for the presentation).
8. Logical Operations with CSS Variables
Ana Tudor explores the interesting possibilities of logical operations using CSS custom properties. The article came about because Ana often wished to perform logical operations on switch variables (a variable that’s either 0 or 1, a concept that’s explained in greater detail in this post). Her article explains what
calc() formulas we need to use for each logical operation.
9. Animating a Hue around the Colour Wheel with Houdini
In this post, front-end developer Dan Wilson explores how colour interpolation works on the web, looks at our options to animate a hue around a colour wheel, and explains how Houdini gives us a mechanism to do this and use custom properties to animate the hue. Also don’t miss Dan’s article on the power of CSS transforms here on the Heart Internet blog.
10. Variable Font Animation with CSS and Splitting JS
11. Variable font resize on device orientation
Mandy Michael created this demo which detects the device orientation and updates the variable font weight axis (plus a transform) using the Google Fonts V2 API. Load in debug mode to see it in action and make sure to turn on motion and rotation info in iOS Safari’s preferences to try it out for yourself. Also check out Mandy’s many other variable fonts experiments.
For more on variable fonts, check out Jason Pamental’s introductory guide, Better Web Typography, here on the Heart Internet blog.
13. Building a Scrapbook Layout with CSS Grid
Another tutorial by Michelle Barker. This time she writes about her process of recreating her son’s pre-school scrapbook layout with CSS Grid. She even built a compound grid generator, a little tool that’s also available on CodePen. Also make sure to check out Michelle’s three–part article on debugging CSS Grid.
14. CSS Grid: Magazine Layouts
This CodePen by Olivia Ng showcases a range of layouts that are possible with CSS Grid. Just click ‘Next’ on the top right to see more layouts and be blown away how complex they get. Also make sure to read Olivia’s post on how you can get started with CSS Grid and check out her other CSS Grid experiments.
15. Grid Experiment No. 7
Product designer Jules Forrest has been posting some excellent CSS Grid experiments like this one that mimics the menu of New York City cafe Russ & Daughters. It’s a fantastic example of what’s possible with Grid and how print can inspire new layouts on the web.
16. Procedurally Generated CSS Numbers
Web developer Adam Kuhn created an impressive generative numbers demo with Sarah Drasner’s CSS Grid Generator for cell drawing, CSS variables and jQuery. Type in a number and watch it emerge from a sea of cubes.
17. Find the Rainbow
18. CSS Animations with Finite State Machines
David Khourshid is deeply passionate about state machines, and how they can be used to simplify otherwise complex UI animations and user flows. Check out Turnable Tables, one of the most complex animations David and Steven Shaw have built for Keyframers, their weekly animated collaborative coding live stream, and watch the video to find out how they did it. Finally, also check out David’s introductory guide to finite state machines.
19. How To Make an Animated Interactive Vue.js Slider
This step-by-step tutorial by creative front-end developer Henry Desroches walks you through creating a nice swipe loading effect with a staggered timeline. The fluid animation is built with Vue.js and SCSS for style.
20. Vue.js Fancy Flyout Selector
Front-end engineer Daryn St. Pierre built a fun flyout interface that leverages the Vue.js transition system to create smooth animations that use cartoonish easings.
21. React Slider with Parallax Hover Effects
Ryan Mulligan (who created the excellent animated verbs, see above) has written a tutorial to explain how to create a slider/carousel with React. The post dives into the details of the slider’s components, the dynamic CSS variables used for the parallax hover effect, and some of the other properties that brought this project to life.
22. HSL Slider
Inspired by a section of Refactoring UI, which recommends ditching Hex for HSL as a colour format, Jhey Tompkins created this little colour picker with React Hooks, pointer events and CSS variables. Slide it left to right for hue, and use the dials above and below to adjust the saturation and lightness.
23. WebGL-enhanced drag slider tutorial with curtains.js
An impressive WebGL demo by development student Clément Roche.
25. Hover Effect for Headers
Olivia Ng created a CSS-only CodePen that demonstrates various subtle hover effects for headers, in particular via animating individual letters. It also makes use of CSS Scroll Snap, which allows a scroll container to snap to certain positions automatically.
26. Rebuilding the Solar System with CSS
UX designer Rob DiMarzo has written an article that dissects his Solar CSSystem demo and explains how he built the planets complete with their relative rotation speed, tilt, and other photorealistic goodies — using only CSS!
27. Clip Clop Clippity Clop
A beautiful CSS-only animated horse (with x-ray view on click!) by Steve Gardner. Click or touch the horse to slow things down and see how things are done.
28. Zero Divs Pure CSS Pixel Art Animation
29. CSS Tic-Tac-Toe
30. Paper Pirouette
Another impressive demo by the Keyframers, David Khourshid and Stephen Shaw. If you want to know how they created this 3D isometric flying paper animation using CSS only, watch them code it live. Topics covered include CSS variables, segments for creating smooth curves and 3D CSS transforms and 3D transform-origin.
Even more pens and how to join in yourself
To find out more about CodePen, watch this video and learn from CodePen co-founder Chris Coyier how to use the platform. And for more inspiring demos, sign up to the CodePen Spark newsletter and check out Sarah Drasner’s collection of useful pens for everyday front-end development. You can also join the community by taking part in one of the weekly challenges or attending one of the many CodePen meetups around the world.
And if you’ve created a pen yourself or would like to tell us about your favourites, share them with us on social or in the comments below!