1
Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius
3m 43s
2
Explore a Site's CSS with Chrome DevTools CSS Overview
1m 58s
3
Create an Animated Underline Effect using CSS Transition and CSS Background Position
4m 31s
4
Use the HSL Color Space and Scoped CSS Variables to Prototype UI Variants
2m 47s
5
Use content-visibility: auto to Improve Initial Page Load Time
2m 6s
6
Use CSS @keyframes to Create a Basic Loading Animation
2m 36s
7
Use CSS filter to Create a Drop Shadow
1m 28s
8
Use CSS pseudo-elements and mix-blend-mode to Create a Duotone Style Effect
2m 24s
9
Use CSS Variables to Maintain the Aspect Ratio for an Element
1m 19s
10
Use Multiple Background Images to Create Single Element CSS Art
4m 22s
11
Use CSS Variables Almost like Boolean Values with Calc
3m 59s
12
Use CSS Transforms to Create Configurable 3D Cuboids
5m 17s
13
Use CSS Variables with Calc and HSL to Implement Dark Mode
2m 5s
14
Use CSS Scroll Behavior for Animated Anchor Scrolls
1m 41s
15
Use CSS Scroll Margin to Give Content Breathing Room
1m 49s
16
Use CSS @property to Animate and Transition Custom Properties
2m 56s
17
Use CSS Resize to Create Resizable Elements
1m 14s
18
Use CSS aspect-ratio to prescribe an aspect ratio for an element
1m 7s

Create an Animated Underline Effect using CSS Transition and CSS Background Position

Share this video with your friends

In this lesson, we cover how to replace the default text-decoration for links with an animated underline.

We use multiple background images with a fixed height to create an underline effect. And then using CSS transition we can make one background image travel across the other.

To make it maintainable, we use CSS variables.

Create an Animated Underline Effect using CSS Transition and CSS Background Position

Share this video with your friends

Course

CSS Tips and Tricks