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;
	border-radius: 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: 0px 3px 3px #CCC;
	-webkit-box-shadow: 0px 3px 3px #CCC;
	box-shadow: 0px 3px 3px #CCC;
							

Gradients

Gradients will give a design a subtle (or not so subtle) addition that can really tie together the elements of your layout.

	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');
							

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;