CSS3 Now - Properties You Can Use Today

(That Won't Break Your Site In Older Browsers)

Property:

@font-face
border-radius
rgba (Background)
rgba (Text)
box-shadow
text-shadow
transformation
Multiple Background Declarations
linear-gradient
radial-gradient

Fallback:

Fallback Font
No Rounded Corners
Opaque Background
Opaque Text
No Shadow
No Shadow
No Transformation
Single Background
Flat Colour
Flat Colour

Browser Support:

Firefox 3.5, Chrome 4, Opera 10, Safari 3.1, IE6
Firefox 1, Chrome 1, Safari 3.1, Opera10.5, IE9
Firefox 3, Chrome 1, Safari 3.1, Opera 10, IE9
Firefox 3, Chrome 1, Safari 3.1, Opera 10, IE9
Firefox 3.1, Chrome 1, Safari 3, Opera 9.5, IE9
Firefox 3.1, Chrome, Safari 1, Opera 9.5
Firefox 3.5, Chrome 1, Safari 3.1, Opera 10.5
Firefox 3.6, Chrome 3, Safari 4, Opera 10.5, IE9
Firefox 3.6, Chrome 1, Safari 2
Firefox 3.6, Chrome 1, Safari 2

Support %:

90%
37%
37%
37%
35%
35%
35%
32%
30%
30%

Syntax:

#my-element {
-webkit-border-radius: 15px;	
-moz-border-radius: 15px;
border-radius: 15px;
}
#my-element {
background-color: rgb(100, 100, 150);
background-color: rgba(100, 100, 150, 0.5);
}
#my-element {
color: rgb(200, 200, 200);
color: rgba(200, 200, 200, 0.5);
}
#my-element {
-webkit-box-shadow: 5px 5px 10px #666;
-moz-box-shadow: 5px 5px 10px #666;
box-shadow: 5px 5px 10px #666;
}
#my-element {
text-shadow: 2px 2px 3px #000;
}
#my-element {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
#my-element {
	background: url(images/box-bg.jpg);
	background: url(images/exclaimation.png) no-repeat -5px -5px,
		    	url(images/star.png) no-repeat 125px top,
		    	url(images/page-turn.jpg) no-repeat right bottom,
				url(images/box-bg.jpg) repeat 0 0;
}
#my-element {
background: #669;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#669));
background: -moz-linear-gradient(top, #000, #669);
}
#my-element {
background: #669;
background: -webkit-gradient(radial, left top, 0, left top, 200, from(#000), to(#669));
background: -moz-radial-gradient(left top, circle farthest-side, #000, #669);
}