Hot new CSS rules to try now

CSS filters

CSS filters are probably one of the most powerful aesthetic tools you can use in your code to update the appearance of your build. With them, you can edit images using only CSS. There are several effects you can apply with CSS filters: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, and SVG. 

Let's take a look at a few of them in more detail. In the image above, clockwise from top left, we have:

blur(5px)
Works by defining a blur size in px to your image; the higher the number the greater the blur (blur(10px) would create a strong blur effect).

grayscale(100%)
The value to change to complete grayscale would be 100% or 1, and to change to semi-grayscale you could use 50% or .5.

hue-rotate(90deg)
Probably the most unpredictable filter, this works by rotating the colour balance of the image, in degrees, turn or radians.

saturate(1)
Changes the colouring of the image making everything more vibrant; 1 or 100% results in complete saturation.

Importantly, you can also chain some of these effects together. So, for example, so you can apply a contrast and grayscale effect to an image. The good thing about the filter code is its simplicity. It is easy to remember and understand what is going on. To apply three chained filters to an image (blur, hue-rotate and drop-shadow), you would write:

.flitwick {
 filter: drop-shadow(10px 10px 10px rgba(0,0,0,.9)); }
.lockhart {
 filter: saturate(8); }
.mcgonagall {
 filter: hue-rotate(90deg); }
.snape {filter: blur(5px); }

There are some known issues with filters, including issues with ordering when chaining effects, which can sometimes have adverse effects. For example, if you were to apply grayscale after sepia it would result in an entirely greyed-out image. Browser support is also a little problematic. There is no support in Opera Mini, IE 11 and below, and Edge only has partial support.

CSS variables (custom properties)

Within CSS, to reuse code throughout a build, you used to have to type it out manually over and over, then preprocessors came along and the world was good – except you had to install and compile them, which wasn’t always as easy as it should be.

CSS custom properties enable you to pass through a string of content into your code, such as a colour or size. Unlike with preprocessors, you can update the variable to be something different when used within a media query, which means you no longer need to declare a specific variable to be used in each media query.

:root {
 --body-color: red;
 --primary-font-size: 12px;
 --paragraph-margin: 0 0 8px; }
p {
 color: var(--body-color);
 font-size: var(--primary-font-size);
 margin: var(--primary-margin);
}
@media screen and (min-width: 768px) {
 :root {
 --primary-font-size: 14px;
 --paragraph-margin: 0 0 16px;   }
 p {
 font-size: var(--primary-font-size);
 margin: var(--primary-margin);
 } }

The variable is declared inside :root and is then applied to your tag via the var(--variable-name) code. As you can see by the example above, we have then overwritten those variables for screen sizes larger than 768px so we no longer need to create an individual variable for each breakpoint we support.

The overall simplicity and cascading element of CSS variables makes it easier and cleaner to use in your build than variables within preprocessors. You can create much cleaner default styling throughout your build while still using the same variable.

CSS variables can also be nested within one another, which can be helpful when working with large builds that are changing frequently. For example, you could do the following:

:root {
 --parent: 1rem;
--child: calc(var(--parent) * 2); }

Overall, it is debatable whether you should use CSS variables or not. Ultimately it all depends on what you have to support for the build you’re doing. As far as browser support goes, variables are supported in all browsers except for Opera Mini, Samsung Internet 4 and old faithful Internet Explorer 11 as always.

One thing worth mentioning is that Microsoft Edge does support variables, but with a few known issues in release 15. You can not apply a CSS variable to an item that is a pseudo element (such as ::before and ::after) – this causes issues when applying background or border colours, and applying animations to pseudo elements. 

Animations that use CSS variables have been known to cause the browser to crash entirely (not ideal). Finally, nesting variables within variables causes an error that results in the browser not reading the variable at all; therefore no value is assigned to your component.

Next page: Background-repeat, aspect-ratio, blend-mode