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

transition
(on :hover)

Fallback:

Fallback Font

No Rounded Corners

Opaque Background

Opaque Text

No Shadow

No Transformation

Single Background

Flat Colour

No Transition

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.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 4, Chrome 1, Safari 3.1, Opera 10.5

Support %:

90%

37%

35%

32%

30%

15%

Syntax:

Use the Font Squirrel Generator

#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);
}

#my-element {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease; 
	background: #669;
	color: #CCC;
}
#my-element:hover {
	background: #669;
	color: #309;
}