Category:Cascading Style Sheets

Animation

Animation is a design technique for drawing the eye to a specific piece of content on the page. CSS allows for designers to animate elements on the page efficiently and with little performance overhead.

Training classes

Web Animation Essentials: CSS Animations and Transitions by Rachel Nabors

Tools

• Ceaser - CSS Easing Animation Tool
• Transforms tool for testing transformations and animations

Layers

Overlays: also called layers, info layers, help bubbles, modals, dialogues (but not HTML dialogs or Javascript dialogs...) anyway, they're things that pop up on top of the page you're on.

• Pure CSS Speech Bubbles by Nicholas Gallagher - aka "how to give your help bubble a tail"

Layout

CSS Grid

Patterns

Tools

• nth-child-tester help you figure out what the nth-child controls will do.

Sticky

Adhesive action with position:sticky! by Digitpaint explains how to put nav elements and similar items sticky to the top or bottom of a page using no Javascript.