Advanced CSS
Motion, visual effects, scroll features, modern cascade tools, theming and CSS architecture.
This is an overview — pick a sub-topic below.
Sub-topics (22)
Transitions
Animate property changes smoothly.
Transforms
Move, rotate, scale and skew elements without affecting layout: `translate`, `rotate`, `scale`.
Animations and Keyframes
Multi-step animations defined with `@keyframes` and applied with `animation`.
Filters
Visual effects: `blur()`, `brightness()`, `contrast()`, `grayscale()`, `drop-shadow()`; `backdrop-filter` blurs what's behind.
Blend Modes
Combine colours of layers like image editors: `mix-blend-mode`, `background-blend-mode` (multiply, screen, overlay…).
Masks
Show parts of an element through an image or gradient mask.
clip-path
Clip an element to a shape: `circle()`, `polygon()`, `inset()`, `path()`.
CSS Shapes
`shape-outside` lets text wrap around non-rectangular floats.
Scroll Snapping
Snap scroll positions to items in carousels and galleries.
Scroll-Driven Animations
Link animation progress to scroll position with `animation-timeline: scroll()` or `view()`.
View Transitions
Animate between page states or pages with the View Transitions API.
CSS Nesting
Write nested rules natively, like Sass.
Cascade Layers
`@layer` groups styles into explicit priority layers, overriding specificity battles.
Container Style Queries
Query a container's custom property values: `@container style(--variant: dark) { … }`.
Subgrid
Child grids align to the parent grid's tracks: `grid-template-columns: subgrid;`.
CSS Houdini
Low-level APIs to extend CSS: Paint API, Properties and Values API (`@property`), Layout API.
Print Styles
Make pages print well with `@media print`.
Reduced Motion
Respect users who get dizzy from animation.
Dark Mode
Offer a dark colour scheme via `prefers-color-scheme` and a toggle.
CSS Architecture
Organise styles so large projects stay maintainable: naming conventions, layers, components, design tokens.
BEM
Block__Element--Modifier naming: `.card`, `.card__title`, `.card--featured`.
Utility-First CSS
Small single-purpose classes composed in HTML: `class="flex gap-4 p-4 rounded-lg"`.
Spotted a mistake or want to add detail? Suggest an improvement — Content Contributors' edits are reviewed by editors before they go live.
Discussion (0)
Sign in or join free to ask questions and discuss this topic.