Logo

30 Seconds of CSS

A curated collection of useful CSS snippets you can understand in 30 seconds or less.

Bouncing loader Creates a bouncing loader animation. Box-sizing reset Resets the box-model so that widths and heights are not affected by their borders or padding. Circle Creates a circle shape with pure CSS. Clearfix Ensures that an element self-clears its children. Constant width to height ratio Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant). Counter Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. Much more

Explore By Topic