Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Top 10 CSS3 Commands

, 12 Aug 2010
Rate this:
Please Sign up or sign in to vote.
CSS3 is here and gives more power to web developers than ever before. Read through our top 10 CSS3 commands and unleash its power!

Introduction

CSS3 is really starting to gather momentum with many of the commands outlined in the CSS3 working draft supported by Firefox, Safari and Google Chrome. We thought we'd put together some of our favourites. Before we get started, CSS3 commands require browser specific syntax for them to work.

For Mozilla Firefox, we need to use the -moz- prefix, for example:

-moz-border-radius:

And for Safari, the -webkit- prefix, for example:

-webkit-border-radius:

1. Border Radius

The CSS3 border radius command creates curved corners on an element. Instead of using 4 or more images to create curved corners, use the following commands:

#box1 {
border: 1px solid #699;

/* for Mozilla Firefox */
-moz-border-radius: 20px;

/* for Safari & Google Chrome */
-webkit-border-radius: 20px;
} 

2. Box Shadow

A shadow can be applied to elements using the CSS3 box shadow command. The box shadow accepts three numeric values plus a colour to apply this effect. These numbers are:

  1. Distance of horizontal offset of shadow - A positive value means the shadow will cast to the right and a negative value to the left
  2. Distance of vertical offset of shadow - A positive value means the shadow will cast below and a negative value above
  3. How blurry you'd like the shadow

With the addition of a colour value, the shadow is complete:

#box2 {
/* Not mandatory for the box shadow effect */
border:1px solid #699;

/* for Mozilla Firefox */
-moz-box-shadow: 5px 5px 5px #b6ebf7;

/* for Safari & Google Chrome */
-webkit-box-shadow: 5x 5px 5px #b6ebf7;
}

3. Transparency or RGBA

Transparency has always been tricky. Different browsers historically have applied transparency using different commands. Continuing this cross-browser inconsistency, we have the addition of the new CSS3 RGBA background property, however in principle this command is more logical. The command consists of 4 values - the first, second and third are the red, green & blue values (0-255) respectively followed by the alpha channel or transparency (0-1).

For the RGBA command, the browser specific prefixes (-moz-, -webkit-) aren't required:

#box3 {
background-color: rgba(110, 142, 185, .5);
}

The background colour command adds a nice blue-grey background at .5 or 50% opacity in browsers that understand the CSS3 RGBA property.

Unfortunately, Internet Explorer will also attempt to render the background colour command but not understand RGBA. To ensure that the background colour is also set in Internet Explorer, an Internet Explorer-only hack is required. In the following example, the :last-child psuedo selector which Internet Explorer doesn't understand is used to exclude it.

#box3 {
/* For all browsers */
background-color: #6e8eb9;
}

body:last-child #box3 {
/* Exclude all IE browsers using :last-child */
background-color: rgba(110, 142, 185, .5)!important;
}

4. Columns

The ability to add columns has been added to CSS3. Rather than floating elements within containers, we can set the column number, width and rule:

#box4 {
/* Not mandatory for the column property */
border: 1px solid #699;

/* for Mozilla Firefox */
-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #6e8eb9;

/* for Safari & Google Chrome */
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #6e8eb9;
}

5. Multiple Background Images

Background imagery has always been restrictive when it comes to CSS due to the fact you can only apply one background image per element. This isn't the case with CSS3 which allows multiple images per element by simply comma-separating them.

To place an image on both the left and right of an element, you can use the following commands, with a little styling:

#box5 blockquote{
background:url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0;
border:1px solid #699;

padding:0 20px;
}

This command will be mis-rendered by Internet Explorer as it doesn't accept 2 background images on a single element. An exclude all Internet Explorer hack is required.

#box5 blockquote {
/* For all browsers, just an open quote */
background: url(/i/quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

body:last-child #box5 blockquote{
/* Exclude all IE browsers using :last-child */
/* Then the two images */
background: url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0;
}

6. Box-sizing - Old School Box Model

We couldn't not include this in a top ten CSS3 top tips as it made us all nostalgic and warm thinking about Internet Explorer 5. Every element of the page is, of course rendered using the box model and the ordering of the box model has always been both important and unintuitive.

The standard W3C box model that we've all become familiar is now a settable property of an element using the following CSS3 command box-sizing: content-box.

#box6 {
width: 200px;
padding: 10px;

/* for Mozilla Firefox */
-moz-box-sizing: content-box;

/* for IE8 */
box-sizing: content-box;

/* for Safari & Google Chrome */
-webkit-box-sizing: content-box;
}

The CSS3 command box-sizing also accepts border-box which places the padding inside of the width, just like Internet Explorer 5!:

#box6b {
width: 200px;
padding: 10px;

/* for Mozilla Firefox */
-moz-box-sizing: border-box;

/*for IE8 */
box-sizing: border-box;

/* for Safari & Google Chrome */
-webkit-box-sizing: border-box;
}

For more information about the box model, take a look at our now historically significant Internet Explorer & CSS issues article.

7. Outlines

Outilines are included in the CSS3 specification and allow both a border and an outline to be applied to a single element.

The outline property is identical to the border command. The additional offset property however allows the border to be moved further inside or outside of the element.

#box7 {
border: 1px solid #000;
outline: 1px solid #699;
outline-offset: -9px;
}

8. Background Gradients

CSS3 background gradients are extremely flexible and can be used to create complex patterns. At its simplest, the CSS linear gradient allows a gradient to be applied to an element from top to bottom and left to right.

This example of a CSS3 gradient in Mozilla Firefox applies a light blue gradient at the bottom of a box for just 20% of the boxes' height

#box8 {
/* for Mozilla Firefox */
background: -moz-linear-gradient(bottom, #b6ebf7, #fff 20%);
}

Safari uses a less intuitive but more flexible approach using colour stop values. An example of the Safari specific code follows (note the linear is included in brackets instead of outside):

#box8 {
background: -webkit-gradient(linear, left bottom, left top,
color-stop(0, #b6ebf7), color-stop(0.20, #fff));
}

9. Rotation

CSS3 also allows rotation of elements using the transform command, with the rotate property accepting degrees as a parameter.

#box9 {
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
}

10. Animation

And finally just for Safari users or Firefox 4 beta users, we have transitions. Transitions include rotation, easing in and out of elements and the ability to specify how many times they do this... and much more!

A simple example might include changing the hover effect of a link so the colour changes smoothly from one colour to another.

Both Safari and Firefox 4 support this functionality consistently.

First define a link colour:

.box a {
color: #0f0;
}

Set a colour and the property to animate using the transition-property:

#box10 a:hover {
color: #0f0;
-moz-transition-property: color;
-webkit-transition-property: color;
}

How long should the animation last:

#box10 a:hover {
color: #0f0;
-moz-transition-property: color;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}

What animation type should be used (including ease, linear, ease-in, ease-out and more!):

#box10 a:hover {
color:#31801f;
-moz-transition-property: color;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}

There are many more ways to animate elements and the CSS3 transition working draft outlines these in great detail.

Conclusion

I hope you found our top ten CSS3 tips useful! These new CSS3 commands mark an exciting new era in web design and development and using CSS3 we can look forward to a more vibrant World Wide Web!

This article was written by Paul McCarthy, head of web development at the user experience consultancy, Webcredible. He's passionate about CSS and using JavaScript for good (not evil), loves spending his time working on the world's most easy-to-use & accessible CMS and is very good at jQuery training

History

  • 12th August, 2010: Initial release

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Trenton Moss
Web Developer
United Kingdom United Kingdom
Trenton Moss is crazy about usability and accessibility - so crazy that he founded Webcredible, an industry leading user experience consultancy, to help make the Internet a better place for everyone. He's very good at information architecture and interaction design.

Comments and Discussions

 
QuestionBORDER RADIUS IN SHAREPOINT SITE Pinmembervanita khatnani1-Apr-13 21:01 
Generaltanks Pinmemberjavad andamani25-Jan-11 7:23 
RantMy vote of 1 Pinmembercs_dilo18-Aug-10 3:59 
GeneralMy vote of 4 PinmemberPranay Rana17-Aug-10 22:22 
GeneralMarket Share PinmemberOakman17-Aug-10 7:43 
GeneralMy vote of 2 Pinmemberjoaeri12-Aug-10 22:20 
GeneralMy vote of 2 PinmemberMember 353812412-Aug-10 6:25 
GeneralRe: My vote of 2 Pinmemberbusbyam12-Aug-10 12:51 
GeneralRe: My vote of 2 PinmemberJLuterek13-Aug-10 4:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 12 Aug 2010
Article Copyright 2010 by Trenton Moss
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid