Useful CSS snippets

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.

Sebastien Day

• 2 min read
css Featured
Useful CSS snippets

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
ecommerce conversion science

Get a free digital audit

See how I can help grow your ecommerce business - I will audit your website, PPC and digital marketing and provide a free report with actionable insights.
Prefer to book a meeting?