30 Seconds of CSS
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
Layout
- Box-sizing reset
- Clearfix
- Constant width to height ratio
- Evenly distributed children
- Flexbox centering
- Grid centering
- Grid layout
- Truncate text
Visual
- Circle
- Custom scrollbar
- Custom text selection
- Dynamic shadow
- Etched text
- Gradient text
- Hairline border
- :not selector
- Overflow scroll gradient
- Pretty text underline
- Reset all styles
- Shape separator
- System font stack
- Triangle
Animation
- Bouncing loader
- Donut spinner
- Easing variables
- Hover underline animation
Interactivity
- Disable selection
- Mouse cursor gradient tracking
- Popout menu
- Sibling fade
Other
- Counter
- Custom variables
Original post: CSS Snippets