.
net technique css
css g
get the best
out of CSS3
Craig Grannelll turns into a cross between Jeffrey Zeldman and Russell Grant, taking a peek at
what the future of CSS has to offer – with a little help from Opera, Safari and Firefox
Knowledge needed Basic CSS and HTML
Requires A text editor, up-to-date versions of the featured browsers
Project time 15 minutes
Web designers spend quite a lot of time being angry. If theyre not
moaning about how some typographic nicety isnt available yet for
online design, theyre rattling on about how Internet Explorer has
once again left something nasty and smelly in their cereal. So, as an
antidote to all that, this months CSS article is chock-full of unbridled
optimism. What were going to do is take a look at some upcoming features
of CSS3, and show how they can be of benefit to web designers.
Note that this isnt The Complete Guide to CSS3; its a quickfire look at
some of the handy stuff in CSS3 that you can already play around with. Not
everything here is currently of practical use (and IE is still playing catch-up with
CSS2, let alone CSS3), but its still worth being mindful of CSS3, because some
properties can add a wee bit of added sparkle to a site without compromising
it for users still surfing with the digital equivalent of a surfboard made of cast
iron. (Note that for this article, we used Safari 3.1, Opera 9.5b2 and Firefox
3 pre – the wonderfully named Minefield – for testing; more compatible
browsers may well exist by the time this magazine ends up in your hands.)
The write stuff
One of the major benefits of CSS has been typographic control. Although a
CSS ninja still cant compete from a typography standpoint with someone
wielding InDesign for print, things have nonetheless progressed massively.
With CSS3, a formerly proprietary property has wormed its way into the
specifications, and its essential in these days of entirely CSS-based layouts.
Text shadow Although part of CSS2, few browsers supported text shadow, but now
Safari and Opera both support basic shadows, and Opera supports multiple shadows
86 .net august 2008
NET178.tut_css 86
Your essent ial CD
ll require
All the files you
al can be
for this tutori
issues CD.
found on this
Expert tip Modularisation
At present, CSS3 is far from fully supported: in some cases proprietary
properties (usually containing browser-specific prefixes) are required to
get certain things working in various browsers. If you decide to use
CSS3 on a live site, its worth bunging all the relevant rules into a
separate style sheet, so theyre self-contained; this is most certainly the
case for any properties using proprietary selectors. Also, for your own
benefit, comment the CSS3 rules, stating what browsers they work in.
This will help you with testing when browser updates are released.
By default, text overflow is shown in browsers, usually with offending copy
breaking outside of its container, although some browsers stretch the
container to fit the content. CSS-oriented designers will no doubt already be
aware of using overflow: hidden to deal with the stretching problem, which
typically merely lops off a couple of pixels of text if its italicised.
However, sometimes text strings are too long to fit within a box. Although
this should be dealt with by a design amendment, thats not always possible
(especially with massive sites that run from a CMS), and so CSS3 offers
the answer with the word-wrap property. Initially a Microsoft invention, it
currently works in both Internet Explorer and Safari, simply breaking relevant
strings as required.
Another handy addition to CSS3 is the ability to define columns. This was
touched on in issue 176s CSS tutorial, where we mentioned that the relevant
properties could come in handy for displaying a list of short items over
multiple columns. Take for example, the following code:
<ol>
<li>Donec porttitor ligula</li>
<li>Eu dolor</li>
[...]
</ol>
If the list has a half-dozen or more items, youll soon be wasting plenty of
space on screen. But apply a class to the list and use the following CSS and the
list will display over two columns:
.twoColumnList {
width: 40em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
-moz-column-count: 2;
-moz-column-gap: 1em;
}
A width is defined and the column-count and column-gap properties
automatically split up the space and position the list elements. Note that
the prefixes -webkit- and -moz- are used here. In the long run, these will be
dropped; currently, however, theyre required to make these properties work
in Safari and Firefox respectively.
4/6/08 12:17:43

Multiplicity For lovers of liquid layouts, multiple backgrounds could soon make things
more interesting from a visual standpoint; only Safari currently supports them, however
Drop shadows are another recent addition to the arsenal of some browsers,
although the text-shadow property is actually part of the CSS2 spec, not CSS3.
Nonetheless, its worth mentioning here, not least because CSS3 now also
provides the ability to define a drop shadow on a box. First, however: text.
Four values are defined when using the text-shadow property, which
is currently supported by Safari and Opera. The first two values define the
horizontal and vertical distance of the cast shadow; the third value defines
the blur distance in pixels; and the fourth value is the colour of the shadow.
Therefore, the following CSS produces a fairly typical drop shadow that you
might use to draw attention to a heading:
text-shadow: 2px 2px 5px #888888;
However, by reducing the shadow distance to zero and changing the colour
from grey to something more vibrant, you can instead emulate a glow effect:
text-shadow: 0 0 10px #ff0000;
Opera enables you to take things further. It supports comma-separated
value sets for text-shadow, enabling you to define multiple sets for a single
element. This means that you can cast a like-coloured shadow in several
directions to create a much larger, bolder glow effect.
Alternatively, you can mix colours, as shown in the red and blue blur
and flaming text examples depicted elsewhere. Code for all of these
shadows is on this issues disc, in the file text-shadows.html.
As mentioned previously, though, CSS3 now enables you to define a
drop shadow for a box, negating the requirement to use images. Currently,
only Safari supports this, although we suspect other browsers will follow
suit shortly.
The de-facto property is box-shadow, and this is currently applied in
Safari using -webkit-box-shadow; the values to define are as per the text-
shadow rule.
Smoothing the edges
Shadows are all very well, but we think border-radius is likely to appeal most
to web designers – at least those infatuated by the current trend for all things
curvy. What this property enables you to do is set a radius for a boxs corners,
thereby enabling you to do away with JavaScript or image-based hacks.
Currently, this works in Firefox and Safari, and requires the -moz- and -webkit-
One of our favourite additions
is the ability to define multiple
backgrounds for an element
NET178.tut_css 87
.net technique css
Working titles
Style that adapts to every browser
An example of a site that works in any browser you care to shake
a stick at is dowebsitesneedtolookexactlythesameineverybrowser.
com. Answering the question posed in its URL, its single page (which
merely displays NO!) offers a slightly different visual design in various
browsers. For those with up-to-the-minute support, such as Safari 3,
the text has a drop shadow; for those left behind, such as IE6, the PNG
has a white background; and on different platforms, the font varies.
The point, of course, is that the minimal design remains usable even
when stripped of its more fine-tuned, design-oriented elements.
Same difference Clockwise from top left: the one-liner website as it appears in
Safari (Mac), Firefox (Mac), Internet Explorer 6 (Windows) and 7 (Windows)
prefixes. Because content still reaches the edges of the box in question, it
makes sense to define a padding value thats at least equal to the border
radius, as shown in the following code block:
.roundedCorners {
width: 300px;
background-color: #d3aa9c;
margin-bottom: 20px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
Of course, the various properties mentioned so far for boxes can be combined,
so its easy enough to create a rounded box with a drop shadow. Usefully,
the drop shadow conforms to the rounded corners, as youd expect. An
example can be seen in the snappily named box-with-corners-and-shadow.
html document on this issues disc, which also highlights another addition to
CSS3: opacity. If you open the document in Safari, Firefox or Opera, youll see
a red semi-transparent rectangle overlaying the pages other div. The opacity
is defined by the cunningly named opacity property; the value range is from 0
to 1 and affects all content within the element its applied to. Safari and Firefox
also enable you to define opacity by using RGBA values (the A standing for
alpha), and so you can, for example, define the value rgba(255, 0, 0, 0.3) for
background to create a semi-transparent red background on an object.
While on the subject of backgrounds, one of our favourite additions to
CSS3 is the ability to define multiple backgrounds for an element. Its
common for web designers to use ugly (from a coding standpoint) hacks
to define multiple backgrounds for a web page or a content area, but in CSS3
you can comma-separate background values, thereby enabling you
to add and position as many background images as you please. For
.net august 2008 87 next>
4/6/08 12:17:45
 .net technique css

Left Some browsers, like

the depicted Safari, enable
you to resize textarea
elements; CSS3s resize
property will eventually
enable you to define any
element as resizable

Right This shot from

Safari shows some of the
handy new properties for
styling boxes. Rounded
corners and drop shadows
can be applied via CSS,
and a boxs opacity can
be defined

example, to position four images, one at each corner of the pages
body, you could use the following rule:
body {
margin: 0;
padding: 0;
background:
url(bkg-tl.png) 0 0 no-repeat,
url(bkg-tr.png) 100% 0 no-repeat,
url(bkg-br.png) 100% 100% no-repeat,
url(bkg-bl.png) 0 100% no-repeat;
} prefixes. Ironically, versions 6 and 7 of Internet Explorer dont support this
Currently, only Safari supports this means of adding backgrounds and an
example, multiple-backgrounds.html, is on this issues disc (it requires the
four PNG background images referred to in the previous rule).
Perfect positioning
The final property well look at is box-sizing, which dredges up an age-old
argument about the CSS box model. Understanding this model is integral to
CSS layouts. If youre not entirely familiar with it, it works something like this:
in CSS, you define the dimensions of an elements content area; you can then
add to that padding and borders. Therefore, a 100-pixel-wide element with a
10-pixel border will actually take up 120 pixels of horizontal space.
Before version 6, Internet Explorer disagreed, and instead placed borders
and padding within the defined dimensions. Eventually, Microsoft relented
and the box model was fixed for IE6. The thing is, Microsofts old way of
doing things was actually pretty useful in certain circumstances. For example,
Resources Where to find out more
create a page with two divs, each with a width of 50 per cent, and float them
both left. Now add some padding and a border of a fixed size to each. Theyll
stack underneath each other, because the combined content width now
exceeds 100 per cent. Various workarounds exist: you can define padding and
borders in percentages and ensure the sum of all the width values doesnt
exceed 100 per cent; you can ensure your div widths dont add to anywhere
near 100 per cent (providing space for padding and borders); or you can
create nested divs and apply borders and padding to them. However, CSS3
enables you to use the border-box property value box-sizing to, for specific
elements, emulate the box model used by IE 5.5 and before. Currently, Opera
uses the property as-is, but Safari and Firefox need the -webkit- and -mox-
property, although the current beta of 8 at the time of writing accepts -ms-
box-sizing. (See other-boxes.html for an example of this property in action.)
And thats not everything CSS3 has to offer. Weve mentioned just a subset
of the extras youll (hopefully) soon be able to integrate into websites. As well
as the properties mentioned there are, among others, resize, which is currently
unsupported, but which will enable you to define whether an elements box can
be resized by the user; border-image, which enables you to define images for
element borders, rather than being restricted to a small set of lines and patterns;
and the ability to size background images (in Opera and Safari) via background-
size (using the -o- prefix for Opera and -webkit- for Safari) and define their point
of origin as relative to the edge of an items padding or content via background-
origin (which accepts the values content, padding and border).
It may seem premature to look at these properties now – as weve said,
certain properties only currently work in certain browsers, often also requiring
prefixes. However, it pays to know where things are likely to head in the
world of web design, and even if you dont consider dabbling in CSS3 getting
yourself ahead of the game, its still fun to experiment and know that youll be
able to bin a whole slew of hacks in the not-too-distant future.

Css3 Info
Everything you need to know
about CSS3 – at least, thats
what the strap-line says. To a
large extent, its right: this is an
excellent blog for keeping abreast
of CSS3 news and information.
css3.info
List orders In the not-too-distant future, CSS3 will enable you to automatically display
elements in columns: handy for laying out lists of short items
World Wide Web Consortium
For more information about the About the author
CSS3 specification – and, indeed,
Name Craig Grannell
any of the web specifications that
takes your fancy – nip over to the Site www.snubcommunications.com
World Wide Web Consortium Areas of expertise Information architecture, site concepts
website, and all will be revealed. Clients Swim~, Rebellion, IDG
w3.org What makes you angry? Things that dont work when
they should

<prev 88 .net august 2008

NET178.tut_css 88 4/6/08 12:17:47