The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.

Not the biggest problem in the world, but it's annoying when you're trying to use borders around words or phrases in paragraphs of text and the result looks like crap because of line breaks. Glad to know there's a simple solution.

I randomly learned this trick today from a newsletter by Victor Ponamariov so thanks for that!

Here’s how I made sense of responsive image content, progressing from simpler to more complicated — and then back to simple.

A tree view (collapsible list) can be created using only HTML and CSS, without the need for JavaScript. Accessibility software will see the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically.

Gradient Magic is the largest gallery of CSS Gradients on the web, with new and exciting gradients added every day.

CSS Gradients are fancy patterns created via CSS, primarily used to add color or patterns to a website. They have many benefits over images, including being easier to work with and much smaller in size.

A set of common UI elements with a hand-drawn, sketchy look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

From author's notes:

Let’s get this straight: The effort to host Google web fonts on your own server is immense! First of all you need to download all .eot, .woff, .woff2, .ttf and .svg files, then copy them onto your server and finally paste a CSS snippet.

Sounds easy? Well it could be, if Google would actually provide any direct links to download these files and a customized CSS for self-hosting them. To fix this problem without using font generation services like Font Squirrel, I decided to publish a little service called google-webfonts-helper.

CSS Grids have been around a long time. Often they come bundled in frameworks such as Bootstrap. I'm not a Bootstrap hater, but sometimes using a framework is overkill if all you really need is a grid. Here's how to make your own CSS Grids from scratch.

Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.

Let’s harness the power of these new media queries to serve an image of the right size based on the device a user views our site on. We’re going to save a lot of bandwidth for the small devices, and serve a beautiful large image for larger ones.

We’ll do that by using the HTML5 picture element and its powerful source tag and media and srcset attributes.

PostCSS is a tool for transforming CSS with JS plugins. The growing ecosystem of PostCSS plugins can add vendor prefixes, support variables and mixins, transpile future CSS syntax, inline images, and more.

PostCSS is used by Google, Twitter, Alibaba, and Shopify. Its most popular plugin, Autoprefixer, is one of the most universally praised CSS processors available.

PostCSS can do the same work as preprocessors like Sass, Less, and Stylus. But PostCSS is modular, 4-40x faster, and much more powerful.