Stunning Aesthetics with CSS

In this chapter, we are going to look at a selection of CSS capabilities for enriching your designs. Every year that passes, CSS introduces more features that enable us to do in code what was previously only possible with an image editor.

Replacing images with effects in code is usually a good thing. Not only does it tend to make things more maintainable and flexible, but it also results in less page “weight” for the end user, with images almost always producing a far greater file size than the comparable code.

In this chapter, we will cover:

• How to create text shadows
• How to create box shadows
• How to make linear and radial gradients
• How to make conic gradients
• How to use multiple backgrounds
• Using CSS background gradients to make patterns
• How to implement high-resolution background images with media queries
• How to use CSS filters (and their performance implications)
• Clipping...

Text shadows

Let’s make a start by looking at text shadows. Text shadows are a fairly simple way to change the aesthetics of text, and therefore provide a good starting point. Support for text-shadow is also ubiquitous. Let’s first consider the basic syntax:

.element {
  text-shadow: 1px 1px 1px #ccc;
}

The first value is the amount of shadow to the right, the second is the amount down, the third value is the amount of blur (the distance the shadow travels before fading to nothing), and the final value is the color. Shadows to the left and above can be achieved using negative values as the first two values. For example:

.text {
  text-shadow: -4px -4px 0px #dad7d7;
}

The color value doesn’t need to be defined as a hex value. It can just as easily be HSL(A) or RGB(A):

text-shadow: 4px 4px 0px hsl(140 3% 26% / 0.4);

You can also set the shadow values in any other valid CSS length units such as em, rem, ch, rem, and so on. Personally, I...

Box shadows

Box shadows allow you to create a box-shaped shadow around the outside or inside of an element. Once you understand text shadows, box shadows are a piece of cake. Principally, they follow the same syntax: horizontal offset, vertical offset, blur, spread (we will get to spread in a moment), and color. Only two of the four length values are required. In the absence of the last two length values, a value of zero is assumed. Let’s look at a simple example:

.shadow {
  box-shadow: 0 3px 5px #444;
}

The default box-shadow is set on the outside of the element. Another optional keyword, inset, allows the box shadow to be applied inside the element.

Inset shadow

The box-shadow property can also be used to create an inset shadow. The syntax is identical to a normal box shadow, except that the value starts with the keyword inset:

.inset {
  box-shadow: inset 0 0 40px #000;
}

Everything functions as before, but the inset part of the declaration instructs...

Background gradients

In days gone by, to achieve a background gradient on an element, it was necessary to tile a thin, graphical slice of the gradient. It was a pain to tweak as it meant round trips into a graphics application, and then when a site was live, you would often experience a flash of unloaded gradient while the background image was fetched.

Thankfully, such hassle is now nothing more than a memory; with a CSS background-image gradient, things are far more flexible. CSS now enables us to create linear, radial, and conic background gradients, and repeating versions of each. Let’s look at how we can define them.

The specification for CSS Image Values and Replaced Content Module 4 can be found at https://www.w3.org/TR/css-images-4/.

The linear-gradient notation

The linear-gradient notation, in its simplest form, looks like this:

.linear-gradient {
  background: linear-gradient(red, blue);
}

This will create a linear gradient that...

Multiple background images

Although a little out of fashion at the moment, it used to be a fairly common design requirement to build a page with a different background image at the top of the page than at the bottom. Or perhaps to use different background images for the top and bottom of a content section within a page. Back in the day, with CSS 2.1, achieving this effect typically required additional markup (one element for the header background and another for the footer background).

With CSS, you can stack as many background images as you need on an element.

Here’s the syntax:

.bg {
    background: url('../img/1.png'), url('../img/2.png'),
    url('../img/3.png');
}

As with the stacking order of multiple shadows, the image listed first is layered nearest to the top, or closer to the user, in the browser. You can also add a general color for the background in the same declaration if you wish, like this:

.bg {
    background...

CSS filters

There is a glaring problem with box-shadow. As the name implies, it is limited to the rectangular CSS box shape of the element it is applied to. Here’s a screengrab of a triangle shape made with CSS with a box shadow applied:

Figure 8.11: Box shadows don’t always provide the effect you want

Not exactly what I was hoping for. Thankfully, we can overcome this issue with CSS filters, part of the Filter Effects Module Level 1 (https://www.w3.org/TR/filter-effects/).

Here is that same element with a CSS drop-shadow filter applied instead of a box-shadow (you can view the code in example_08-08):

Figure 8.12: A drop-shadow filter effect can apply to more than just boxes

Here is the format for CSS filters:

.filter-drop-shadow {
  filter: drop-shadow(8px 8px 6px #333);
}

After the filter property, we specify the filter we want to use, which is drop-shadow in this example, and then pass in the arguments for the filter. drop-shadow...

A warning on CSS performance

When it comes to CSS performance, I would like you to remember this one thing:

”Architecture is outside the braces, performance is inside.”

—– Ben Frain

Let me expand on my little maxim: as far as I can prove, worrying about whether a CSS selector (the part outside the curly braces) is fast or slow is pointless. I set out to prove this here: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/.

However, one thing that really can grind a page to a halt, CSS-wise, is expensive properties (the parts inside the curly braces). When we use the term “expensive” in relation to certain styles, it simply means it costs the browser a lot of overhead. It’s something the browser, or perhaps more accurately, the host hardware, finds overly taxing to do.

It’s possible to make a common-sense guess about what will cause the browser extra work. It’...

CSS clip-path

The clip-path property allows you to “clip” an element with a shape. Think of clipping just like drawing a shape on a piece of paper and then cutting around it. This shape can be something simple like an ellipse, something more complicated such as a polygon, or something more complex still, such as a shape defined by an inline SVG path. If you want to view each of these on a page, check out example-08_09 in this chapter’s downloadable code.

CSS basic shapes

You can use clip-path with any of the CSS basic shapes. These are inset, circle, ellipse, and polygon, as described here: https://www.w3.org/TR/css-shapes-1/#supported-basic-shapes.

Let’s take a look at how we would write each of these.

clip-path with a circle

With clip-path: circle(), the first argument you pass is the size, and the second, which is an optional argument, is the position of that shape. So, if you wanted to clip an element down to a circle 20% of the...

mask-image

You can also mask elements with images, from either an image source with transparency such as a PNG graphic, a linear-gradient, which we looked at earlier in this chapter, or an SVG mask element. You can read about all the possibilities afforded to us in the specification here: https://www.w3.org/TR/css-masking-1/.

In the meantime, we will just look at a fairly straightforward example so you can appreciate the kind of effect that is possible and how the syntax works to achieve it.

Suppose we have an image. I have one that NASA took of Mars. I’d get one I took myself but, you know, it’s a bit of a jaunt.

Now, suppose we also have a PNG image that is transparent except for the word “MARS”. We can use this PNG as a mask on top of our image element.

This is what we see in the browser:

Figure 8.29: A mask image applied

Here is our relevant HTML:

<img
  src="mars.jpg"
  alt="An image of Mars from space...

mix-blend-mode

One final, very visual, property I want to relate before we end this chapter is mix-blend-mode. This property lets you decide how you want one element to “blend” with the element it sits on top of.

Here are the possible blend modes: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity.

Static images don’t really do this property justice, so I’d encourage you to open example_08-12 in a browser. We’re using that same image of Mars from the last example but setting it as a fixed background for the body element.

Then, we add some text on top that you can scroll to see mix-blend-mode in effect. In this example, we have used overlay, for no reason other than I thought it worked best. If you open the example along with your developer tools, you can cycle through the other possibilities. It’s perhaps redundant to...

Summary

In this chapter, we’ve looked at a selection of the most useful CSS features for creating lightweight aesthetics in responsive web designs. CSS’s background gradients curb our reliance on images for background effects.

We considered how they can be used to create infinitely repeating background patterns. We’ve also learned how to use text shadows to create simple text enhancements, and box shadows to add shadows to the outside and inside of elements.

We’ve also looked at CSS filters. They allow us to achieve even more impressive visual effects with CSS alone and can be combined for truly impressive results.

In the last part of this chapter, we looked at creating masking effects with both images and clipping paths.

We’ve added some considerable capabilities to our toolbelts! We will come back to the fancier CSS effects in Chapter 11, Transitions, Transformations, and Animations. But, before that...

In the next chapter,...