In the previous chapter we learned about some quick and useful CSS3 techniques to aid in building responsive designs. We also made a big difference to the visuals by employing the CSS3 @font-face rule to apply custom typography and learned about CSS3's tools for selecting DOM elements. So, with some CSS3 basics covered, let's look at some more advanced features of CSS3; how we can give a responsive design an aesthetic lift by using some of the more exciting CSS3 techniques that, for the vast majority, don't require a single graphics image, making our responsive design as bandwidth friendly as possible.
In this chapter we will cover:
- How to create text-shadows with CSS3
- How to create box-shadows (drop shadows) with CSS3
- Making gradient backgrounds with CSS3
- Using multiple backgrounds with CSS3
- Using CSS3 background gradients to make patterns
- Using the CSS3
@font-facerule to make bandwidth friendly icons
At this point I'm going to reiterate why I believe CSS3 is so useful in responsive design: using CSS3, rather than images in a bandwidth design reduces http requests (and hence makes the pages load faster) and makes the design more flexible and maintainable. Those benefits would be useful even on a typical fixed-width 'desktop' design but it's even more important with a responsive design as it easily allows different size box or text shadows at different viewports—without needing to make and export a single image. I'm presuming you're with me on this, so let's dig in.
Tip
Vendor prefixes
When implementing CSS3, just remember to add relevant vendor prefixes to ensure the broadest cross-browser compatibility. Alternately, if you're happy to add some JavaScript to your code, consider the afore mentioned -prefix-free script. It automatically adds relevant vendor prefixes to any CSS3 rules that need them, allowing you to only write the W3C version in your stylesheet. Get it here: http://leaverou.github.com/ prefixfree/.
One of the most widely implemented CSS3 features is 'text-shadow'. Like @font-face
, it had a previous life but was dropped in CSS 2.1. Thankfully it's back and widely supported (all modern browsers and Internet Explorer 9 onwards).
Let's look at the basic syntax:
.element {
text-shadow: 1px 1px 1px #cccccc;
}Remember, the values in shorthand rules always go right and then down. Therefore, 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.
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 hsla(140, 3%, 26%, 0.4);
However, keep in mind that the browser must then also support HSL/RGB color modes along with text-shadow
in order to render the effect. If I'd really like to use HSLA or RGBA (because of the opacity capability) I tend to do this:
text-shadow: 4px 4px 0px #404442; text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);
Define the shadow first with a HEX value (as a fall back for older browsers) and then repeat the rule afterwards using the HSLA or RGBA value.
You can also set the shadow values in em or rem
. For example, here's the AND THE WINNER ISN'T composite:
In Photoshop, the EVERY YEAR text is 102 px with a text shadow of 4 px. Therefore, using the trusty target ÷ context = result formula (4 ÷ 102 = .039215686). So this becomes:
text-shadow: .039215686em .039215686em 0em #dad7d7; /* 4 ÷ 102 */
The following screenshot shows the effect in the browser:
Personally, I rarely use em or rem for text-shadow values. As the values are always really low, using 1 or 2 px generally looks good across all viewports.
Depending on your eyesight, you may notice that we now also have a text shadow on the second sentence, WHEN I WATCH THE OSCARS I'M ANNOYED…. Here's why:
<h1>Every year <em>when I watch the Oscars I'm annoyed...</em></h1>
The text-shadow is currently applying to the entire <h1> tag (which includes the <em> tag within it) so we need to remove the text-shadow from the <em> tag:
#content h1 em {
font-family: 'BitstreamVeraSansRoman';
display: block;
line-height: 1.052631579em; /* 40 ÷ 38 */
color: #757474;
font-size: .352941176em; /* 36 ÷ 102 */
text-shadow: none;
}And now it's looking good:
Shadows to the left and above can be achieved using negative values. For example:
text-shadow: -4px -4px 0px #dad7d7;
Adds an effect like the following:
If there is no blur to be added to a text-shadow the value can be omitted from the declaration, for example:
text-shadow: -4px -4px #dad7d7;
The spec assumes that the first two values are for the offsets if no third value is declared.
I've always felt that text-shadow works best for creating embossed text. This effect usually works best with a highlight color (for example, white or close to it) applied to dark text on a non-white background. Let's add an embossed effect to the navigation links:
nav ul li a {
height: 42px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
font-family: 'BebasNeueRegular';
font-size: 1.875em; /*30 ÷ 16 */
color: #000000;
text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75);
}And here's the result. Subtle but effective—just a little depth added without shouting LOOK AT MY TEXT-SHADOW!
It's possible to add multiple text shadows by comma separating two values. For example:
text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7;
As ever, subtlety is necessary or type can become illegible. I'm going to use this declaration to combine both the previous embossed effect and the existing text-shadow. Here's the effect in the browser:
Note
Read the W3C specification for the text-shadow property here: http://www.w3.org/TR/css3-text/#text-shadow