book

CSS Secrets

by Lea Verou

June 2015

Intermediate to advanced

388 pages

7h 57m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Web standards: friend or foe?CSS coding tips
1 Translucent borders2 Multiple borders3 Flexible background positioning4 Inner rounding5 Striped backgrounds6 Complex background patterns7 (Pseudo)random backgrounds8 Continuous image borders
9 Flexible ellipses10 Parallelograms11 Diamond images12 Cutout corners13 Trapezoid tabs14 Simple pie charts
15 One-sided shadows16 Irregular drop shadows17 Color tinting18 Frosted glass effect19 Folded corner effect
20 Hyphenation21 Inserting line breaks22 Zebra-striped text lines23 Adjusting tab width24 Ligatures25 Fancy ampersands26 Custom underlines27 Realistic text effects28 Circular text
29 Picking the right cursor30 Extending the clickable area31 Custom checkboxes32 De-emphasize by dimming33 De-emphasize by blurring34 Scrolling hints35 Interactive image comparison
36 Intrinsic sizing37 Taming table column widths38 Styling by sibling count39 Fluid background, fixed content40 Vertical centering41 Sticky footers
42 Elastic transitions43 Frame-by-frame animations44 Blinking45 Typing animation46 Smooth state animations47 Animation along a circular path

Content preview from CSS Secrets

2 Backgrounds & Borders

1 Translucent borders

The problem

By now, you’ve probably dabbled quite a bit with semi-transparent colors in CSS, such as rgba() and hsla(). They were a huge revolution back in 2009, when we were finally able to use them in our designs, despite the required fallbacks, shims, and even ugly IE filter hacks for the daring. However, their uses in the wild were mostly centered around backgrounds. There were a few reasons for this:

Some early adopters hadn’t quite realized that these new color formats were actually colors just like #ff0066 or orange, and treated them like images, using them only in backgrounds.
It was much easier to provide fallbacks for backgrounds than for other properties. For example, the fallback for a semi-transparent background could be a single pixel semi-transparent image. For other properties, the only possible fallback was a solid color.
Using them in other properties, such as borders, wasn’t always as straightforward. We’ll see why next.

FIGURE 2.1 24ways.org was one of the first websites to really utilize semi-transparent colors in its design, as early as 2008, although they were also mostly backgrounds ...