Useful CSS snippets
css

Useful CSS snippets

2 min read

A collection of nice css tricks, most of which are in use on this website. Pinch yourself and remember all the cool new CSS features we have now, no more floats! I love you grid and flex! ❤️

A Complete Guide to Data Attributes | CSS-Tricks
Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
CSS-TricksChris Coyier
Data attributes are really useful for programmatically applying css
A pretty timeline
Add fontawesome icons as a pseudo element
color: color-mod(var(--color-midgrey) l(-8%));
Modify the brightness of a colour variable
A nice button animation
Animated squares background animation
Four colour moving gradient background
A two column layout with a fixed sidebar and scrolling content
A Complete Guide to Data Attributes | CSS-Tricks
Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
CSS-TricksChris Coyier
Not a snippet to use but data attributes are great
Hide header on scroll down, show on scroll up - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Code PlaygroundJSFiddle
A fixed menu that hides on scroll down and displays on scroll up
A CSS & JS text typing animation
Sebastien Day

Sebastien Day