Interactive tutorials
Workshop: animated starfall on pure CSS
Step by step, with clear explanation of each step, let's create an animated starfall on pure CSS. This effect can be used as a background for promo blocks and navigation blocks.
Mastering the :nth-child pseudoclass
The use of the :nth-child
and :nth-of-type
pseudo-classes, which allows you to select elements by their sequence number, is discussed in detail.
We dig into the :nth-child(an + b)
syntax, give examples of creating simple, complex and combined element sets, and give examples of calculating sequence numbers for these sets.
Gradient border
Creating a card with a nice gradient border using repeating-linear-gradient
.
repeating-linear-gradient VS linear-gradient
A study with excellent visualization. On the example of solving one and the same task, we clearly and in detail analyzed the differences between repeating-linear-gradient
and linear-gradient
. It turns out that repeating-linear-gradient
is the coolest tool in its class.
Workshop: card with 3D flip animation
Using the transform
family of properties and the backface-visibility
property, we create a card that flips beautifully in 3D when hovered over. And then we'll use animations to explain how this 3D effect works.
Gallery with interesting image switching
Creating a gallery with animated image switching on CSS transformations. Using the trick with animation-fill-mode: both
.
Background animation with waves
Create a background animation with waves using pure CSS. Use the animation
property family for this purpose.