---
title: "Category: CSS"
url: https://themodernweb.co.uk/category/web-development/css/
description: "Entries filed under the CSS category on The Modern Web."
---

# Category: CSS

Entries filed under CSS.

## [February 2017](https://themodernweb.co.uk/2017/02/)

### [SCSS Mixins: 5 awesome and creative examples](https://themodernweb.co.uk/2017/02/scss-mixins-5-awesome-examples/)

A mixin is a named block of declarations you can include wherever you need them, optionally with arguments. The value is not that it saves typing, but that it puts one decision in one place: change the mixin and every element using it changes with it.

Filed under: [CSS](https://themodernweb.co.uk/category/web-development/css/), [SCSS](https://themodernweb.co.uk/category/web-development/scss/), [Showcase](https://themodernweb.co.uk/category/showcase/), [Web Development](https://themodernweb.co.uk/category/web-development/) · Tagged [awesome](https://themodernweb.co.uk/tag/awesome/), [codepen](https://themodernweb.co.uk/tag/codepen/), [creative](https://themodernweb.co.uk/tag/creative/), [css](https://themodernweb.co.uk/tag/css/), [examples](https://themodernweb.co.uk/tag/examples/), [scss](https://themodernweb.co.uk/tag/scss/) · [Permalink](https://themodernweb.co.uk/2017/02/scss-mixins-5-awesome-examples/)

### [Font Awesome 5 is nearly here and it looks, well, awesome](https://themodernweb.co.uk/2017/02/font-awesome-5/)

Before scalable icon sets, interface symbols were images, and every size and colour variant was another file to produce and cache. Treating icons as glyphs meant a single dependency could serve a whole interface, scale cleanly, and be recoloured with the same CSS that styles text.

Filed under: [CSS](https://themodernweb.co.uk/category/web-development/css/), [Icons](https://themodernweb.co.uk/category/resources/icons/), [Web Design](https://themodernweb.co.uk/category/web-design/), [Web Development](https://themodernweb.co.uk/category/web-development/) · [Permalink](https://themodernweb.co.uk/2017/02/font-awesome-5/)

### [Add animated gradients to your website with Javascript](https://themodernweb.co.uk/2017/02/add-beautiful-animated-gradients-to-your-website/)

An animated gradient gives a page movement without loading a video or a sequence of images. The whole effect is colour values changing over time, which costs a fraction of what any media file would.

Filed under: [CSS](https://themodernweb.co.uk/category/web-development/css/), [Javascript](https://themodernweb.co.uk/category/web-development/javascript/), [Resources](https://themodernweb.co.uk/category/resources/), [Web Development](https://themodernweb.co.uk/category/web-development/) · [Permalink](https://themodernweb.co.uk/2017/02/add-beautiful-animated-gradients-to-your-website/)

## [January 2017](https://themodernweb.co.uk/2017/01/)

### [The end of the clearfix hack. Could it be?](https://themodernweb.co.uk/2017/01/clearfix-hack/)

For years, layout was built with floats, and a container holding only floated children collapsed to no height at all. The clearfix was the workaround: a generated pseudo-element that cleared the floats and forced the parent to contain them.

Filed under: [CSS](https://themodernweb.co.uk/category/web-development/css/), [Web Development](https://themodernweb.co.uk/category/web-development/) · [Permalink](https://themodernweb.co.uk/2017/01/clearfix-hack/)