HTML & CSS

Daily curated collection of articles and resources.

cssanimation.rocks

Build an Awesome Hero Header

When people arrive on your homepage you have mere seconds to impress them, explain what you’re about and convince them to stick around. This is an important moment yet most sites miss ...

unboxed.co

Structuring and Managing CSS

Managing CSS has always been a bit of a free-for-all. We have complete freedom as to how we structure and organise our project’s stylesheets. This is both good and bad. For quick ...

cssanimation.rocks

Animating Your Hero Header

If you’ve ever arrived on a website and been greeted by a large image or video, and some titles on top, then you’ve encountered the “Hero Header”. It’s a popular way to ...

UI8 sponsored

Branding Book & Style Guide Templates

A beautiful collection of 5 different style guide templates! 75 fully customizable and easy to use pages, each with real wording. These templates are the perfect starting point for creating beautiful branding books.

waarissyb.nl

Your CSS Could Be More Understandable

As a front-end developer at a large design agency, I regularly switch between projects. Usually we don’t have enough time to do handoff of every project detail. That’s one of the reasons ...

kirupa.com

Working with CSS Timing Functions

So far, we’ve created our animations and transitions by specifying only a handful of things: the properties to animate, the initial & final property values, the duration. The exact syntax for how ...

zellwk.com

Writing Modular CSS (Part 1)

Have you worked on large websites that spans more than a few pages? If you did, you probably realized the horrors of not conforming to a robust CSS architecture. You probably would ...

igalia.com

CSS Grid Layout Is Here to Stay

The story behind CSS Grid Layout development in Chromium/Blink and Safari/WebKit performed by Igalia with Bloomberg’s support. Posted by Manuel Rego Casasnovas on March 16, 2017 It’s been a long journey but ...

daverupert.com

Thoughts on Negative Margins

Lately I’ve been sharing some CSS Tricks I’ve stumbled in to while trying to solve some problems on client work. It’s been fun uncovering new little solutions. Using *:not() for Full Bleed ...