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.

Custom Properties. Part 1: Introduction

The first section of this interactive course is about CSS Custom Properties, aka CSS Variables, where you will learn their syntax and typical usage examples.

Custom Properties. Part 2: Values and value splitting

We will learn about one of the killer features of custom properties. They allow you to break multi-component CSS values into parts and conveniently work with individual components. Which is invaluable when working with colors, shadows, gradients, animations and other compound CSS values.

Animated gradient border

Create an animated gradient border using pure CSS. We will need only one container, without any additional wrappers or pseudo elements. The background-origin property and the @property directive play a key role.

Collection of neomorphism style buttons

Let's get acquainted with neomorphism and understand how to implement components in this style. We will create neomorphic buttons of simple shape, buttons with frames, and then neomorphic buttons of complex shape.

Shutter Hover Effect

Create a beautiful hover effect that looks like a camera shutter. We will learn about a completely unexpected way of using CSS shadows.

Button with complex animation on hover

Let's create a button with an unusual effect of lifting and rotating on hover. To realize the effect we will use CSS transformations, shadows and smooth transitions.

Rotating 3D cube

We'll create a rotating 3D cube and understand how 3D transformations work. We will see with our own eyes what effect the perspective and backface-visibility properties have. We will understand how multiple transformations work.