CSS3 Quick Reference

CSS3 is pretty neat. Curved borders, drop shadows, gradients... all kinds of stuff it used to take to much time in photoshop and a lot more time with the code to make everything line up properly (because obviously the internet works like photoshop). Below you will find a quick reference to some of the neat stuff that exists with css3. Now lets hope that we can use it without having to worry about browser compliancy.

Curved Borders

Maybe on of the most useful additions to stylesheets are the ability to integrate curved borders without creating dozens of tiny images that you have to line up to the design.

	
	border: 2px solid #666;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	border-radius: 1em;
							

You can also determine each radius specifically:

	-webkit-border-top-left-radius: 0.5em;
	-webkit-border-top-right-radius: 0.5em;
	-webkit-border-bottom-right-radius: 0.5em;
	-webkit-border-bottom-left-radius: 0.5em;
	-moz-border-radius-topleft: 0.5em;
	-moz-border-radius-topright: 0.5em;
	-moz-border-radius-bottomright: 0.5em;
	-moz-border-radius-bottomleft: 0.5em;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	border-bottom-left-radius: 0.5em;
							

or in shorthand (top, right, bottom, left or vertical, horizontal):

	
	border: 2px solid #666;
	-moz-border-radius: 1em 1em 1em 1em;
	-webkit-border-radius: 1em 1em 1em 1em;
	border-radius: 1em 1em 1em 1em;
							

Drop Shadows

Shadows can give an emphasis to objects while giving the illusion of a third demension that used to only be able to created by lining up a ridiculous number of images and hoping that you'd be able to get them align properly in all browsers.

	-moz-box-shadow: 0.5em 0.5em 1em #CCC;
	-webkit-box-shadow: 0.5em 0.5em 1em #CCC;
	box-shadow: 0.5em 0.5em 1em #CCC;
							

Where the first number is horizontal distance, the second the vertical distance, the third the blur, and then the color. You can replace the color with an RGBA value to add an opacity variable, like rgba(50, 50, 50, 0.5). You can also add the word inset to the end of the variable string to inverse the shadow to display on the inside of the object.

	-moz-box-shadow: 0.5em 0.5em 1em #CCC inset;
	-webkit-box-shadow: 0.5em 0.5em 1em #CCC inset;
	box-shadow: 0.5em 0.5em 1em #CCC inset;
							

Text Shadows

Text-shadows work almost identically to box-shadows.

	text-shadow: 0.5em 0.5em 1em #CCC;
							

However, unlike box-shadows, you can stack text shadows.

	text-shadow:	0.5em 0.5em 1em #fff, 
					0.75em 0.75em 1em rgba(0,0,0,0.15);
							

Opacity

Toggling the alpha channel of an element can create very interesting effects for things like main navigation. It should be noted that because of the inheritted nature of this attribute, it can cause some very unwanted effects.

	
	filter:alpha(opacity=90);
	opacity:0.9;
							

Gradients

And then there is the addition of gradients. Arguably the most useful attribute added with the third generation of css.

	background: #1e5799; /* Old browsers */
	background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
							

Like Text shadows you can stack the color changes of a gradient.

	background-color: #CCC;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(1.0, #CCC),
		color-stop(0.7, #FFF),
		color-stop(0.0, #CCC)
		);
	background-image: -moz-linear-gradient(
		center bottom,
		#CCC 100%,
		#FFF 70%,
		#CCC 0%
		);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCC', endColorstr='#FFF');
							

When adding a gradient, I would recommend generating a base64 image for the background attribute, which will give you better graceful degredation to older browsers.