Advanced CSS

advanced

Part of Advanced CSS

Theory

Advanced CSS covers the tools that bring web pages to life — animations, transitions, responsive design, and modern features like custom properties and math functions.

CSS Transitions

Transitions smoothly change property values over time. They provide subtle animations triggered by state changes (like hover).

.button {
  background: #3498db;
  transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

Transition Properties

.element {
  transition-property: all;            /* which properties to animate */
  transition-duration: 0.3s;           /* duration */
  transition-timing-function: ease;    /* speed curve: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier() */
  transition-delay: 0s;                /* delay before starting */
}

Shorthand: transition: property duration timing-function delay;

Transitionable properties: color, background, opacity, transform, width, height, margin, padding, box-shadow, filter, and many more.

CSS Transforms

Transforms modify the appearance of an element by moving, rotating, scaling, or skewing it:

.box:hover {
  transform: scale(1.1) rotate(5deg) translateX(10px);
}

Transform Functions

translate(x, y) — moves element (use translateX, translateY)
scale(x, y) — scales element (1 = original, 2 = double)
rotate(angle) — rotates (deg, rad, turn)
skew(x, y) — skews element
matrix(a, b, c, d, tx, ty) — combines all with a 2D transformation matrix

For 3D: rotateX(), rotateY(), rotateZ(), translateZ(), perspective(), rotate3d().

CSS Animations (@keyframes)

Unlike transitions (which need a trigger), animations run automatically or with a delay and can have multiple steps:

@keyframes slideIn {
  0%   { transform: translateX(-100%); opacity: 0; }
  50%  { transform: translateX(10%); }
  100% { transform: translateX(0); opacity: 1; }
}
 
.element {
  animation: slideIn 0.8s ease-out forwards;
}

Animation Properties

.element {
  animation-name: slideIn;           /* @keyframes name */
  animation-duration: 1s;            /* duration */
  animation-timing-function: ease;   /* speed curve */
  animation-delay: 0.5s;             /* delay before start */
  animation-iteration-count: 3;      /* number of times (use infinite) */
  animation-direction: normal;       /* normal, reverse, alternate, alternate-reverse */
  animation-fill-mode: forwards;     /* what happens before/after: none, forwards, backwards, both */
  animation-play-state: running;     /* running or paused */
}

Example: loading spinner

@keyframes spin {
  to { transform: rotate(360deg); }
}
 
.spinner {
  width: 40px; height: 40px;
  border: 4px solid #ddd;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

CSS Custom Properties (Variables)

Custom properties store reusable values and enable dynamic theming:

:root {
  --primary-color: #3498db;
  --text-color: #333;
  --spacing-unit: 8px;
  --border-radius: 6px;
}
 
.button {
  background: var(--primary-color);
  border-radius: var(--border-radius);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
}

Custom properties are inherited and can be changed dynamically with JavaScript or media queries:

/* Dark theme override */
[data-theme="dark"] {
  --primary-color: #bb86fc;
  --text-color: #fff;
}

Calc(), Min(), Max(), and Clamp()

These CSS math functions enable dynamic, context-aware values:

calc() — performs arithmetic: width: calc(100% - 40px);
min() — selects the smallest value: width: min(600px, 100%);
max() — selects the largest value: font-size: max(16px, 2vw);
clamp() — clamps between a min and max: font-size: clamp(1rem, 2.5vw, 2rem);

clamp(MIN, PREFERRED, MAX) is excellent for fluid typography:

h1 { font-size: clamp(2rem, 5vw, 4rem); }

Media Queries

Media queries apply styles conditionally based on device characteristics:

/* Mobile-first: base styles then override for larger screens */
.container {
  display: block;
}
 
@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
 
@media (min-width: 1200px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Common Breakpoints (Mobile-First)

@media (min-width: 576px) — small devices (landscape phones)
@media (min-width: 768px) — medium devices (tablets)
@media (min-width: 992px) — large devices (desktops)
@media (min-width: 1200px) — extra large (wide desktops)

Other Media Features

@media (prefers-color-scheme: dark) { /* dark mode */ }
@media (prefers-reduced-motion: reduce) { /* accessibility */ }
@media print { /* print styles */ }
@media (max-width: 600px) and (orientation: landscape) { /* combined */ }

Pseudo-Classes

Pseudo-classes select elements based on state or position:

:hover           /* mouse hover */
:focus          /* keyboard focus */
:active         /* being clicked */
:visited        /* visited link */
:nth-child(n)   /* nth child (2, odd, even, 3n+1) */
:nth-of-type(n) /* nth of its type */
:first-child    /* first child */
:last-child     /* last child */
:not(selector)  /* negation */
:empty          /* no children */
:checked        /* checked checkbox/radio */
:disabled       /* disabled form element */
:target         /* targeted by URL hash */

li:nth-child(even) { background: #f0f0f0; }
p:not(.intro) { color: #666; }
input:focus { border-color: #3498db; box-shadow: 0 0 5px rgba(52,152,219,0.3); }

Pseudo-Elements

Pseudo-elements create virtual elements or target specific parts:

::before    /* inserts content before element */
::after     /* inserts content after element */
::first-line    /* first line of text */
::first-letter  /* first letter of text */
::selection     /* selected/highlighted text */
::placeholder   /* input placeholder */

.quote::before { content: ""; display: inline-block; width: 20px; height: 2px; background: #3498db; margin-right: 10px; vertical-align: middle; }
input::placeholder { color: #aaa; font-style: italic; }
::selection { background: #3498db; color: white; }

Use prefers-reduced-motion: reduce to disable animations for users with vestibular motion disorders: @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; } }

Practical Examples

Example: Transitions, Animations, and Transforms

html

Example: Responsive Design with Media Queries and Variables

html

Exercises

Create a Loading Spinner

easy

Create a pure CSS loading spinner using @keyframes animation. The spinner should be a circular element that rotates continuously. Use border-top-color for the spinning effect.

Expected Output:

A circular loading spinner (40-60px) with a transparent body and a colored border segment that rotates infinitely. Smooth rotation with no jumps.

Build an Animated Card

medium

Create a card with hover animations using transitions and transforms. The card should lift up (translateY), scale slightly, show a shadow, and reveal an overlay with additional information. All animations should use smooth transitions.

Expected Output:

A card that smoothly lifts (translateY(-8px)), scales (scale(1.02)), and shows an enhanced shadow on hover. Optional: an overlay slides in from the bottom with additional text.

Mini Quiz

Mini Project

Mini Project: Animated Landing Page

Build a complete animated landing page for a fictional product or app. Use CSS transitions, keyframe animations, transforms, custom properties, and responsive design with media queries.

Requirements:

Bonus Challenge

Add a scroll-triggered animation using Intersection Observer (a small JavaScript snippet) or use CSS animation-timeline if browser support allows.