1. .net technique css
css get the best
g
out of CSS3
l CD
Your essentia uire
ll req
All the files you
al can be
for this tutori
issue s CD.
found on this
Craig Grannell turns into a cross between Jeffrey Zeldman and Russell Grant, taking a peek at
l
what the future of CSS has to offer – with a little help from Opera, Safari and Firefox
Knowledge needed Basic CSS and HTML
Expert tip Modularisation
Requires A text editor, up-to-date versions of the featured browsers
At present, CSS3 is far from fully supported: in some cases proprietary
Project time 15 minutes properties (usually containing browser-specific prefixes) are required to
get certain things working in various browsers. If you decide to use
Web designers spend quite a lot of time being angry. If they re not
CSS3 on a live site, it s worth bunging all the relevant rules into a
moaning about how some typographic nicety isn t available yet for
separate style sheet, so they re self-contained; this is most certainly the
online design, they re rattling on about how Internet Explorer has
case for any properties using proprietary selectors. Also, for your own
once again left something nasty and smelly in their cereal. So, as an
benefit, comment the CSS3 rules, stating what browsers they work in.
antidote to all that, this month s CSS article is chock-full of unbridled
This will help you with testing when browser updates are released.
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 By default, text overflow is shown in browsers, usually with offending copy
some of the handy stuff in CSS3 that you can already play around with. Not breaking outside of its container, although some browsers stretch the
everything here is currently of practical use (and IE is still playing catch-up with container to fit the content. CSS-oriented designers will no doubt already be
CSS2, let alone CSS3), but it s still worth being mindful of CSS3, because some aware of using overflow: hidden to deal with the stretching problem, which
properties can add a wee bit of added sparkle to a site without compromising typically merely lops off a couple of pixels of text if it s italicised.
it for users still surfing with the digital equivalent of a surfboard made of cast However, sometimes text strings are too long to fit within a box. Although
iron. (Note that for this article, we used Safari 3.1, Opera 9.5b2 and Firefox this should be dealt with by a design amendment, that s not always possible
3 pre – the wonderfully named Minefield – for testing; more compatible (especially with massive sites that run from a CMS), and so CSS3 offers
browsers may well exist by the time this magazine ends up in your hands.) the answer with the word-wrap property. Initially a Microsoft invention, it
currently works in both Internet Explorer and Safari, simply breaking relevant
The write stuff strings as required.
One of the major benefits of CSS has been typographic control. Although a Another handy addition to CSS3 is the ability to define columns. This was
CSS ninja still can t compete from a typography standpoint with someone touched on in issue 176 s CSS tutorial, where we mentioned that the relevant
wielding InDesign for print, things have nonetheless progressed massively. properties could come in handy for displaying a list of short items over
With CSS3, a formerly proprietary property has wormed its way into the multiple columns. Take for example, the following code:
specifications, and it s essential in these days of entirely CSS-based layouts.
<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
Text shadow Although part of CSS2, few browsers supported text shadow, but now dropped; currently, however, they re required to make these properties work
Safari and Opera both support basic shadows, and Opera supports multiple shadows in Safari and Firefox respectively.
86 .net august 2008
NET178.tut_css 86 4/6/08 12:17:43

2. .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.
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;
Same difference Clockwise from top left: the one-liner website as it appears in
However, by reducing the shadow distance to zero and changing the colour Safari (Mac), Firefox (Mac), Internet Explorer 6 (Windows) and 7 (Windows)
from grey to something more vibrant, you can instead emulate a glow effect:
text-shadow: 0 0 10px #ff0000; 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
Opera enables you to take things further. It supports comma-separated radius, as shown in the following code block:
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 .roundedCorners {
directions to create a much larger, bolder glow effect. width: 300px;
Alternatively, you can mix colours, as shown in the red and blue blur background-color: #d3aa9c;
and flaming text examples depicted elsewhere. Code for all of these margin-bottom: 20px;
shadows is on this issue s disc, in the file text-shadows.html. padding: 10px;
As mentioned previously, though, CSS3 now enables you to define a -webkit-border-radius: 10px;
drop shadow for a box, negating the requirement to use images. Currently, -moz-border-radius: 10px;
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 Of course, the various properties mentioned so far for boxes can be combined,
Safari using -webkit-box-shadow; the values to define are as per the text- so it s easy enough to create a rounded box with a drop shadow. Usefully,
shadow rule. the drop shadow conforms to the rounded corners, as youd expect. An
example can be seen in the snappily named box-with-corners-and-shadow.
Smoothing the edges html document on this issue s disc, which also highlights another addition to
Shadows are all very well, but we think border-radius is likely to appeal most CSS3: opacity. If you open the document in Safari, Firefox or Opera, you ll see
to web designers – at least those infatuated by the current trend for all things a red semi-transparent rectangle overlaying the page s other div. The opacity
curvy. What this property enables you to do is set a radius for a box s corners, is defined by the cunningly named opacity property; the value range is from 0
thereby enabling you to do away with JavaScript or image-based hacks. to 1 and affects all content within the element it s applied to. Safari and Firefox
Currently, this works in Firefox and Safari, and requires the -moz- and -webkit- 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
One of our favourite additions 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
is the ability to define multiple 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
backgrounds for an element 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>
NET178.tut_css 87 4/6/08 12:17:45

3. .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 create a page with two divs, each with a width of 50 per cent, and float them
body, you could use the following rule: 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
body { exceeds 100 per cent. Various workarounds exist: you can define padding and
margin: 0; borders in percentages and ensure the sum of all the width values doesn t
padding: 0; exceed 100 per cent; you can ensure your div widths don t add to anywhere
background: near 100 per cent (providing space for padding and borders); or you can
url(bkg-tl.png) 0 0 no-repeat, create nested divs and apply borders and padding to them. However, CSS3
url(bkg-tr.png) 100% 0 no-repeat, enables you to use the border-box property value box-sizing to, for specific
url(bkg-br.png) 100% 100% no-repeat, elements, emulate the box model used by IE 5.5 and before. Currently, Opera
url(bkg-bl.png) 0 100% no-repeat; uses the property as-is, but Safari and Firefox need the -webkit- and -mox-
} prefixes. Ironically, versions 6 and 7 of Internet Explorer don t support this
property, although the current beta of 8 at the time of writing accepts -ms-
Currently, only Safari supports this means of adding backgrounds and an box-sizing. (See other-boxes.html for an example of this property in action.)
example, multiple-backgrounds.html, is on this issue s disc (it requires the And that s not everything CSS3 has to offer. We ve mentioned just a subset
four PNG background images referred to in the previous rule). 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
Perfect positioning unsupported, but which will enable you to define whether an element s box can
The final property we ll look at is box-sizing, which dredges up an age-old be resized by the user; border-image, which enables you to define images for
argument about the CSS box model. Understanding this model is integral to element borders, rather than being restricted to a small set of lines and patterns;
CSS layouts. If you re not entirely familiar with it, it works something like this: and the ability to size background images (in Opera and Safari) via background-
in CSS, you define the dimensions of an element s content area; you can then size (using the -o- prefix for Opera and -webkit- for Safari) and define their point
add to that padding and borders. Therefore, a 100-pixel-wide element with a of origin as relative to the edge of an item s padding or content via background-
10-pixel border will actually take up 120 pixels of horizontal space. origin (which accepts the values content, padding and border).
Before version 6, Internet Explorer disagreed, and instead placed borders It may seem premature to look at these properties now – as we ve said,
and padding within the defined dimensions. Eventually, Microsoft relented certain properties only currently work in certain browsers, often also requiring
and the box model was fixed for IE6. The thing is, Microsoft s old way of prefixes. However, it pays to know where things are likely to head in the
doing things was actually pretty useful in certain circumstances. For example, 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.
Resources Where to find out more
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
Css3 Info World Wide Web Consortium
Everything you need to know For more information about the About the author
about CSS3 – at least, that s CSS3 specification – and, indeed,
Name Craig Grannell
what the strap-line says. To a any of the web specifications that
large extent, it s right: this is an takes your fancy – nip over to the Site www.snubcommunications.com
excellent blog for keeping abreast World Wide Web Consortium Areas of expertise Information architecture, site concepts
of CSS3 news and information. website, and all will be revealed. Clients Swim~, Rebellion, IDG
css3.info 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