The top 10 CSS3 techniques

This article originally appeared in issue 210 of .net magazine - the world's best-selling magazine for web designers and developers.

While the following list does not include all of the great new properties in the CSS3 specification, this selection of the top 10 will give you a great start with your front-end coding projects. They’ll save you a lot of time and effort. Note: with the exception of @font-face, neither IE6, 7 nor 8 (from here on referred to as “the older IEs”) support any of the CSS3 properties. IE9 supports several properties and will be indicated.

1. @font-face

@font-face allows for fonts to be downloaded from a web server to the user’s computer to correctly render a given font. The syntax is:

There is a true bug with the older IEs: even when an .eot file is established and is stacked correctly in the @font-face declaration, the IEs still may not render it due to being distracted by the subsequent values. To get around this, it helps to have two @font-face declarations: the first one with the .eot by itself, and then the second with the standard @font-face declarations.

The full solution

2. Opacity

Top tool: A fantastic generator for border radius is aptly named border-radius.com. The tool quickly produces cross-browser compliant code for creating border-radius.

5. Box-shadow

Another long-awaited feature: box-shadow generates drop-shadows on elements, with no more image swapping, slicing or other shenanigans. The syntax is:

• position: the default value is outset and does not need to be stated. The other value is inset and needs to be established if desired. 
• horizontal/x-offset: a positive value places the shadow on the right of the box; a negative value places the shadow on the left of the box. 
• vertical/y-offset: a positive value places the shadow below the box; a negative value places the box-shadow above the box. If this third value is omitted, then the blur will be set to 0. 
• blur radius: 0 is the sharpest, as there is no blur; higher numbers increase the blur. A measurement notation must be given. 

The full solution

6. Text-shadow

The kissing cousin to box-shadow, textshadow adds drop shadows to text, allowing for effects such as outer glow, embossed and letterpress looks. The syntax for text-shadow is identical to that of box-shadow, except that the value inset is not applicable to text-shadow. Like its box counterpart, text-shadow is also well supported by all the modern browsers and Internet Explorer 9. Also like box-shadow, you can assign multiple shadows to a single element by listing the multiple property value sets. It’s possible to get some really good effects on text that way.

The full solution

1. Top tool: There are several great CSS3 generation tools at WestCiv.com, including ones for box-shadow and text-shadow: westciv.com/tools/shadows/ and westciv.com/tools/text-properties/index.html

 

7. Gradient

Along with border-radius, gradient is one of my favourite additions to CSS3. Interestingly, gradient isn’t a property itself, but rather a value set that be can used with the properties background, border-image and list-style-image. The gradient is generated by the browser, and thus saves several steps in having to make an image in an image editor. gradient is the one property with the most variation in syntax between the browsers. I’ve created a handy little value mapping and breakdown chart for linear gradients.

 

Some tips to remember which syntax goes with which browser:

 

• The -moz- and standard syntax notate the type of gradient before the list of values enclosed in the parentheses
• The -moz- syntax allows for a degree value
• The position names vary between the two browsers
• The -webkit- syntax denotes the colour stops with from and to

Mozilla allows for an angle value, but it’s not required. An omitted angle value equals 0. At present, neither Opera nor Internet Explorer (including IE9) supports gradient. Unfortunately for Opera, the fallback will be to do what you did before: have a background image for the gradient. For the IEs, there’s a filter that will create linear gradients. Unfortunately, there’s no IE filter for radial gradients.

 

The full solution

1. .gradient {
2. color: #fff;
3. background: #aaaaaa url(gradient_slice.jpg) 0 0
4. x-repeat; /*background color matches one
5. of the stop colors. The gradient_slice.jpg is
6. 1px wide */
7. background-image: -moz-linear-gradient(top, #07407c, #aaaaaa);
8. background-image: -webkit-gradient(linear,left
9. top,left bottom,color-stop(0, #07407c),color-stop
10. (1, #aaaaaa));
11. -ms-filter: "progid:DXImageTransform.Microsoft.
12. gradient(startColorStr='#07407c',
13. EndColorStr='#aaaaaa')";
14. filter:
15. progid:DXImageTransform.Microsoft.gradient
16. (startColorStr='#07407c', EndColorStr='#aaaaaa');
17. }

Top tool: The gradient generation tool at gradients.glrzad.com is highly efficacious. Colorzilla also has a great gradient generator at colorzilla.com/gradient-editor.

 

 

8. Multiple background images

With CSS3, you can establish multiple backgrounds for an element. Again, this is great progress from the days of using non-semantic nested elements to achieve a similar outcome. While being able to have multiple images assigned to one element was available in CSS2.1, with CSS3 they now work as layers, with the first background listed as being on “top” (closest to the user in space), and the following backgrounds stacking “beneath” the first. The syntax is easy: just list the value sets and separate them with a comma. Only the final value set in the list can have a background-color value.

 

1. background:
2. <image> <position> <size> <repeat> <attachment> <box>,
3. <image> <position> <size> <repeat> <attachment> <box>,
4. <image> <position> <size> <repeat> <attachment> <box>,
5. <image> <position> <size> <repeat> <attachment> <box> <color>;

Alternatively, establish the properties separately:

 

1. background-image: <image>, <image>, <image>, <image>;
2. background-repeat: <repeat>, <repeat>, <repeat>,<repeat>;
3. background-position: <position>, <position>, <position>,<position>;
4. /* plus any background attachment and/or box properties as needed */

All modern browsers support multiple backgrounds except -- you guessed it -- the older IEs. IE9 Multiple background images supports multiple background values. By now you know the drill: you should establish a fallback image with all desired properties, so create that background declaration before the declaration that lists the multiple background value sets. Unsupportive browsers will display just one background: the first background property listed. However, according to Peter-Paul Koch, Explorer Mac will instead display the last one listed.

 

As for an IE filter to replicate the outcome, one exists, but it’s not sophisticated at all. You could use the AlphaImageLoader filter to load multiple images, but unfortunately, while you’ll get alpha transparency, you can’t really control the placement (which is stuck at the top left), nor the image repeat (which is stuck at none). There are other performance issues too. A final option would be to create a flattened version of the background image layers and serve that background image to the older IEs through conditional comments.

 

The full solution

1. #wrap {
2. background: url(body-full.gif) top left no-repeat;
3. background:
4. url(body-top.gif) top left no-repeat,
5. url(body-bottom.gif) bottom left no-repeat,
6. url(body-middle.gif) left repeat-y;
7. -ms-filter: "progid:DXImageTransform.
8. Microsoft.AlphaImageLoader(src=' body-top.gif',
9. sizingMethod='scale')";
10. filter: progid:DXImageTransform.Microsoft.
11. AlphaImageLoader(src='body-top.gif', sizingMethod='scale');
12. zoom: 1;
13. }

Alternatively, try this:

 

1. body {
2. background: url(all_layers.jpg) no-repeat 0 0;
3. background-image:
4. url(first_layer.png),
5. url(second_layer.png),
6. url(third_layer.png),
7. url(fourth_layer.png);
8. background-repeat: no-repeat, no-repeat,
9. no-repeat, no-repeat;
10. background-position: 0 0, 0 50, 0 100, 0 200;
11. -ms-filter: "progid:DXImageTransform.
12. Microsoft.AlphaImageLoader(src=' body-top.gif',
13. sizingMethod='scale')";
14. filter: progid:DXImageTransform.Microsoft.
15. AlphaImageLoader(src='
16. body-top.gif', sizingMethod='scale');
17. zoom: 1;
18. }

 

9. Transform

Transform has a number of values that do various things: rotate, scale, skew, translate and matrix. I’ll only discuss rotate here: for full details on the rest of the transform values see standardista.com/css3-transforms. The generic syntax is:

 

1. <-prefix->transform: type(<value>) type(<value>)
2. type(<value>) type(<value>);

For rotate specifically, here’s the syntax:

 

1. <-prefix->transform: rotate(<value>)

Positive values will rotate the object clockwise to the right, and negative values will rotate the element counter-clockwise to the left. There is an IE filter that will rotate an element: the matrix filter. Employing this requires the element to have Layout, so remember to add zoom: 1; or another appropriate property-value pair that gives Layout.

 

The full solution

1. .rotate {
2. -moz-transform: rotate(-5deg);
3. -o-transform: rotate(-5deg);
4. -webkit-transform: rotate(-5deg);
5. transform: rotate(-5deg);
6. -ms-filter: "progid:DXImageTransform.
7. Microsoft.Matrix(M11=0.9961946980917455,
8. M12=0.08715574274765817, M21=-
9. sizingMethod='auto expand')";
10. filter: progid:DXImageTransform.Microsoft.
11. Matrix(sizingMethod='auto expand',
12. M11=0.9961946980917455,
13. M12=0.08715574274765817,
14. M21=-0.08715574274765817,
15. M22=0.9961946980917455);
16. zoom: 1;
17. }

Top tool: WestCiv’s transform style generator (westciv.com/tools/transforms/index.html) generates code for modern browsers. CSS3Please.com gives the code with the IE filter fallback.

 

 

10. Transition

The property transition allows for graceful shifts of dynamic element value changes. The syntax for transition is:

 

1. <-prefix->transition:<property> <duration>
2. <timing-function> <delay>;

• property: you can name the specific CSS property to which the transition is applied, or you can use the value all. 
• duration: defines the length of time that the transition will take. 
• timing-function: describes easing functions – the intermediate values used during a transition – will be calculated. 
• delay: defines the start of the transition. You can have multiple value sets to one transition property.

While the property is supported in all modern browsers, its rendering is not created equally.

 

The transitions in Mozilla are still quite choppy despite allegedly being supported, while they’re smooth in Safari and Chrome. As for a filter … well. This is an instance where there are several Internet Explorer filters that could be applicable, but it’s largely dependent upon which transition property you’re employing. Perusing the Internet Explorer filter resources at the Microsoft site is a good starting point.

 

The full solution

1. #photos > img:hover {
2. -moz-transform: scale(1.1,1.1);
3. -webkit-transform: scale(1.1,1.1);
4. -o-transform: scale(1.1,1.1);
5. transform: scale(1.1,1.1);
6. -moz-transition: all 1s ease-in-out;
7. -webkit-transition: all 1s ease-in-out;
8. -o-transition: all 1s ease-in-out;
9. transition: all 1s ease-in-out;
10. }

Hopefully this primer has given you the inspiration to get on the bandwagon and start using CSS3 now. Its acceptance and adoption by front-end developers and designers increases in popularity daily, and every new release of the modern browsers shows increased support, even IE9. And if CSS3 is getting you excited, then you should check out some of the great HTML5 features, such as how to add HTML5 video to your site! What are you waiting for?