0 Comments

The best CSS3 techniques to improve your website

Posted on February 22, 2010, in Resources

CSS3 is all about improving a design that already looks good and works well. Never rely solely on CSS3 as Internet Explorer (among others) fails to recognize the markup. Don’t let those browsers put you off though because the majority support various kinds of CSS3 attributes.

We want to show you just how easy it is to use CSS3 and what a visual impact it has. Below are some of the most usable and supported CSS3 techniques along with code for you to play with.

---

Rounded Corners / Border Radius

Rounded corners is a huge topic and the number of techniques for rounded corners is massive. Rounded corners usually involve using JavaScript, Images and some clumpy markup. CSS3 makes rounded corners ridiculously easy with just a couple of lines inside your style sheet.

Preview:

From: International Gorilla Conservation Programme

Compatibility:

Unsupported in IE and Opera

Usage:

top-left, top-right, bottom-right, bottom-left.

Code:

-moz-border-radius:10px 10px 10px 10px;
-khtml-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;

---

Text Shadow

Preview:

From: MetaLab

Compatibility:

Unsupported in IE, Firefox 3 and below and Chrome 1

Usage:

x-coordinate, y-coordinate, blur, colour.

Code:

text-shadow: 0 10px 5px #000;

---

Transitions

Preview:

From: Sam Brown

Compatibility:

Supported only by Webkit (Safari and Chrome)

Usage:

Property: all properties to be changed.
Duration: length of transition

Code:

-webkit-transition-property: color, background;
-webkit-transition-duration: 0.3s;

---

Box Shadow

Preview:

From: Simon Colly

Compatibility:

Unsupported in Firefox 3 and below, IE and Opera

Usage:

x-coordinate, y-coordinate, blur, colour.

Code:

-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;

---

Selection

Modifying the text highlight colour which has been blue for far to long is a way to make your website unique.

Preview:

From: Fuzeo!

Compatibility:

Unsupported in IE (Firefox requires -moz- prefix)

Usage:

Apply the code below to your style sheet to make text highlights pale orange.

Code:

::selection {
	background: #ffdc97;
}
::-moz-selection {
	background: #ffdc97;
}

---

Don’t forget… CSS3 is currently an experimental technology which will not replace CSS2 for many years. Your responsibility as a developer is to help promote new technology (such as CSS3) by using it. Remember never to rely on CSS3, it should be added as an extra to benefit those of us on good browsers (the majority).