CSS Typography and Effects Quiz
Five drills on practical CSS typography and visual effects: text-shadow, gradients, layered shadows for a faux 3D look, fluid typography with clamp(), and the parallax background-attachment trick.
307 views
9
Apply a subtle drop shadow to a headline with text-shadow. What do the four values mean, in order?
Set a smooth diagonal gradient as the background of a hero section, fading from a brand purple to a brand blue. Use linear-gradient.
Create a faux 3D text effect by stacking multiple text-shadow layers. Each layer offset by 1px adds depth.
Use clamp() for fluid body text that scales from 1rem at 320px viewport width to 1.25rem at 1280px viewport width. Show the derivation.
Implement a simple parallax background using background-attachment: fixed. What is the trade-off versus a JavaScript-driven parallax?