CSS3

With CSS3 we can achieve a lot of cool design effects that were once only possible through the use of image creation in programs like Photoshop. We can even do some neat animations. Here’s a handy chart for referencing browser support of CSS3 properties (it’s mostly IE8 and below you have to worry about).

Create rounded corners with border-radius

.ex-round {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Box shadows

syntax: x y blur color // syntax: inset x y blur color (inner shadow)

.ex-shadow {
-webkit-box-shadow: 4px 4px 5px #282b1f;
-moz-box-shadow: 4px 4px 5px #282b1f;
box-shadow: 4px 4px 5px #282b1f;
}

Text Shadows

.ex-text-shadow {text-shadow: 0px -1px 3px #000;}

Gradients

.ex-gradient {
   background-color: #ff0492; /* fallback color */
   background-image: -webkit-linear-gradient(top, #fff, #ff0492); 
   background-image: -moz-linear-gradient(top, #fff, #ff0492);
   background-image: -ms-linear-gradient(top, #fff, #ff0492);
}

Opacity/Transparency

.ex-opacity {opacity: 0.5;}

Transform

scale(val), rotate(val), skew(val,[val]), translate(val,[val])

.ex-transform {
	-webkit-transform:skew(335deg, 10deg);
	-moz-transform:skew(335deg, 10deg);
	transform:skew(335deg, 10deg);
}

Transitions

(hover mouse over box)

syntax: css-property duration timing-function

.ex-transition {
	-webkit-transition:transform 0.5s ease-in-out;
	-moz-transition:transform 0.5s ease-in-out;
	transition:transform 0.5s ease-in-out;
}

.ex-transition:hover {
	-webkit-transform:scale(8) translate(50px, 0);
	-moz-transform:scale(8) translate(50px, 0);
	transform:scale(8) translate(50px, 0);
}