orangegraphiclabs

For over years web designer moaning about how some nice typographic isn’t available for online media design (then they turn into a text-graphical bandwidth killer image just for showing plenty nice texts), or how they angry about once again Internet Explorer left them some nasty on their sweet cookies. So, as a little cure to all web designer pain, now we have to take a look at some cool features of new CSS3 and its benefit for web designer.

Web Font with @font-face

Not exactly a feature which is new to CSS3, @font-face was fist proposed for CSS2 and has been implemented in Internet Explorer since version 5! However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format. With the release of Safari 3.1, however, website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages.

To use web fonts, each form of the font family must be declared using the @font-face rule; for example, to use both regular and italic forms of Jos Buivenga’s Delicious font, you would put the following in your stylesheet:

@font-face  {
   font-family: Delicious;
   src: url('Delicious-Roman.otf');
   }

@font-face  {
   font-family: Delicious;
   font-weight: bold;
   src: url('Delicious-Bold.otf');
   }

Then call it using font-family:

h3  { font-family: Delicious, sans-serif; }

The @font-face rule is planned (although not confirmed) for Firefox 3.1 and Opera 10. You can see more examples linked from this article at A List Apart.

Note: As with images and other media, check the license of the font you wish to use before implementing it. Many fonts are not yet licensed for this kind of use on the web.

Multi-column layout

W3C offers a new way to arrange text “news-paper wise”, in columns. Multi-column layout is actually a module on its own. It allows a web developer to let text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns. The first would be done by column-width, the latter by column-count. To create a space between the columns, you need to specify a width for column-gap.

Multi-column layout is currently only supported in Mozilla based browsers and Safari 3, who have prefixed the properties with respectively -moz- and -webkit-. The example below is done with column-width, the CSS for it is as follows:

-moz-column-width:  13em;
-webkit-column-width:  13em;
-moz-column-gap:  1em;
-webkit-column-gap:  1em;

Which results in the following:

Jason Harrop has created a multicolumn extension for Firefox which allows you to apply these CSS properties to whatever page you like.

Text-shadow, Photoshop like effects using CSS

CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows:

text-shadow: 2px 2px 2px #000;

This produces the following text with a shadow 2px right and below of the text, which blurs for 2px:

Note: This feature is NOT new in CSS3; it was originally proposed in CSS2. Safari had it from version 1, however!

The following works in Opera, Konqueror, iCab and Firefox 3.1a, and looks really cool (or, rather, the opposite!):

Box-shadow, one of CSS3’s best new features

The CSS3 backgrounds and borders module has a nice new feature called box-shadow, which is implemented in Safari 3+ and Firefox 3.1 (Alpha). The specification speaks of multiple shadows, but the author already “has his doubts” on that, and it isn’t implemented in Safari 3.

The property takes 3 lengths and a color as it’s attributes, the lengths are:

1. the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;
2. the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the box;
3. the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

The shadow should be following curved corners created with border-radius, here’s a screenshot.

The CSS code for this is:

box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

Border-radius: create rounded corners with CSS!

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. This is an example:

The code for this example above is actually quite simple:

background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;

These different corners can also each be handled on their own, Mozilla has other names for the feature than the spec says it should have though, as it has f.i. -moz-border-radius-topright as opposed to -webkit-border-top-right-radius:

These are handled by / should be handled by:

-moz-border-radius-topleft  / -webkit-border-top-left-radius
-moz-border-radius-topright  / -webkit-border-top-right-radius
-moz-border-radius-bottomleft  / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright  / -webkit-border-bottom-right-radius

Border-image: using images for your border

Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image. These two values are shorthands for:

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image

border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

border-image currently works in Safari and Firefox 3.1 (Alpha). The syntax to use it is:

border-image:  url(border.png) 27 27 27 27 round round;

Here’s the sample :

Background-size

CSS3 gives you a way to specify the size of background images. You can specify this size in pixels, width and height, or in percentages. When you specify a size as a percentage, the size is relative to the width or height of the area that you have pointed out using background-origin.

The only browsers having this feature implemented so far are Opera 9.5, Safari 3 and Konqueror, they use -o-background-size, -webkit-background-size and -khtml-background-size.

Multiple backgrounds with CSS3

CSS3 allows for multiple background images on one element. To do this, you can separate backgrounds by commas, like this:

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

The only browser projects having this feature implemented so far are WebKit and KHTML (Konqueror). This got into Safari 1.3 though, and works in OmniWeb 5.5 and up.

Opacity & RGBA Color

The most widely implemented feature of CSS3 up till now is opacity. It’s probably also the one people have been waiting for the most…

See the example:

See the difference in the code between the first row, which uses the same color value for each row, combined with an opacity value, and the second, which uses RGB values:

<div  style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div>
<div  style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div>
<div  style=" background: rgb(255, 0, 0) ; opacity: 0.6;"></div>
<div  style=" background: rgb(255, 0, 0) ; opacity: 0.8;"></div>
<div  style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>

And the second one:

<div  style=" background: rgb(243, 191, 189) ;  "></div>
<div  style=" background: rgb(246, 143, 142) ;  "></div>
<div  style=" background: rgb(249, 95 , 94)  ; "></div>
<div  style=" background: rgb(252, 47, 47)   ; "></div>
<div  style=" background: rgb(255, 0, 0)     ; "></div>

The exact same effect shown here can be reached using rgba values.

CSS3 Speech

CSS2 added support for the Aural media type which is used for “styling” speech synthesis in aural user agents (e.g. screen readers). The specification added several properties to this new media type.

The current Working Draft of CSS2.1 reserves media=”speech”, but explicitly does not define which properties apply to it. Also, the aural media type has been deprecated.

The CSS 3 Speech module removes some of the old properties and adds new ones. All of them are now assigned to the speech media type.

Opera is one of the most popular user agents implementing most of the CSS 3 Speech properties.

To hear the speech, you have to download and install Opera, then enable Voice in Preferences > Advanced > Voice. Select the above text and press V, or right-click and select Speak.

The sample code used to style speech is:

#voice-volume  { -xv-voice-volume: x-soft; -xv-voice-balance: right; }
#voice-balance  { -xv-voice-balance: left; }
#speech-cue {  cue-after: url(ding.wav); }
#voice-rate {  -xv-voice-rate: x-slow; }
#voice-family  { voice-family: female; }
#voice-pitch  { -xv-voice-pitch: x-low; }
#speech-speak  { speak: spell-out; }

Note: Since CSS 3 Speech module is still a Working Draft, Opera implements some of its properties using the -xv- prefix.