CSS has come a long way, but min(), max(), and clamp() make a lot of things a lot easier than they used to be, and really open up the world of responsive typography like we never had before! Clamp() is the ingredient that we've needed for a long time to really be able to make type fully responsive in our CSS, and to be able to do it on one line is absolute magic!
-
Similar Content
-
By Jimi Wikman
Not too long ago, someone asked me if I could clone the Google Font theme toggle button, and after looking at it, it looked like a lot of fun to try and do, so I took on the challenge!
🔗 Links
✅ Google Fonts: https://fonts.google.com/
✅ My finished code: https://codepen.io/kevinpowell/pen/Po...
⌚ Timestamps
00:00 - Introduction
00:55 - Getting everything ready
03:14 - Setting the stage with CSS
07:08 - Adding custom properties
10:36 - Changing the theme on click
15:01 - Changing the aria-label on click
18:04 - adding the tooltip
23:22 - Animating the tooltip
27:27 - Animating the icon
35:06 - Changing the icon on page load
40:48 - Adding the pulse animation
50:00 - Using focus-visible to improve the tooltip
-
By Jimi Wikman
One of the best ways to learn is to find fun designs on existing websites and to try and recreate them, so with that in mind, we're taking the animated card design from the Top Games section over at https://popdog.com and seeing if we can recreate it with only HTML and CSS!
/// Timestamps
00:00 - Introduction 01:17 - Overview 02:18 - HTML 13:57 - CSS basic setup 15:35 - styling the front 28:24 - front and background hover 38:15 - animating the game name 42:43 - the rank 46:33 - styling the back 60:14 - fixing the spacing 65:31 - fade-up and in for the back -
By Jimi Wikman
Understaning how block, inline, and inline-block each behave is very important when learning CSS, as well as knowing why you might want to switch the display property of an element every now and then.
-
By Jimi Wikman
While all the combinators are useful from time to time, but the adjacent sibling selector is easily the one I use the most often. It has a several really good uses, a few of which I'll be diving into in this video!
-
By Jimi Wikman
In this video we look at how to make a fully responsive card with HTML and CSS, with a big helping hand from flexbox!
-
There are no comments to display.
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now