CSS Wizardry—CSS3 Examples & Progressive Enhancement

All CSS shown corresponds to the elements directly above. The ID/class names are the same as used and all CSS3/progressive enhancement snippets are shown in bold.
By Harry Roberts—CSS Wizardry. Please Tweet.

Columns:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit. Aenean eget erat id massa sodales.

p#intro{
	font-size:1.6em;
	line-height:1.5em;
	margin-bottom:1.5em;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	
	-moz-column-count:3;
	-moz-column-gap:20px;
	-webkit-column-count:3;
	-webkit-column-gap:20px;
	column-count:3;
	column-gap:20px;
}

Transforms:

Hover rows/cells list items…

Name	Type	Edit	Remove
Ted Harris	Admin	Edit details…	Delete user…
Jane Peters	Sales	Edit details…	Delete user…
Sam Edwards	Web Developer	Edit details…	Delete user…
Allen Jones	Web Developer	Edit details…	Delete user…

	Ted	Jane	Sam	Allen
Age	45	31	34	27
Salary	£21,000	£26,000	£32,000	£29,000
Service	2 years	3 years	6 years	4 years

table{
	font-size:1.2em;
	width:100%;
	margin-bottom:20px;
}
th{
	font-weight:bold;
}
td,th{
	border:1px solid #ccc;
	padding:5px;
}
thead tr{
	border-bottom:2px solid #ccc;
}
tbody tr:nth-of-type(odd){
	background:#ffc;
}
/*--- EMPLOYEES ---*/
#employees .col{
	width:25%;
}
#employees tbody tr:hover{
	font-weight:bold;
	background:#ff8;
	
	-moz-transform:scale(1.02);
	-webkit-transform:scale(1.02);
	-moz-box-shadow:0 0 5px #666;
	-webkit-box-shadow:0 0 5px #666;
}
/*--- MATRIX ---*/
#employees .col{
	width:20%;
}
#matrix tbody td:hover{
	font-weight:bold;
	background:#ff8;
	
	-moz-transform:scale(1.02);
	-webkit-transform:scale(1.02);
	-moz-box-shadow:0 0 5px #666;
	-webkit-box-shadow:0 0 5px #666;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

#nav{
	font-family:"GraublauWeb",Helvetica, Arial, Verdana, sans-serif;
	width:220px;
	float:left;
	margin-bottom:18px;
}
#nav li a{
	color:#fff;
	font-size:1.6em;
	font-weight:bold;
	padding:10px;
	display:block;
	text-decoration:none;
	background:#34ad4a;
	
	text-shadow:1px 1px 1px #1c5e28;
	background:-webkit-gradient(linear, left top, left bottom, from(#47b649), to(#34ad4a));
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
}
#nav li:first-of-type a{
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;
	-webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
#nav li:last-of-type a{
	-moz-border-radius-bottomleft:10px;
	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
#nav li a:hover{
	background:#0079ac;

	text-shadow:1px 1px 1px #0d4f6b;
	background:-webkit-gradient(linear, left top, left bottom, from(#0ba7be), to(#0079ac));
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
	-moz-box-shadow:0 0 5px #666;
	-webkit-box-shadow:0 0 5px #666;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

Box Shadow:

Photos of me taken by Suzanna Haworth.

Hover these:


.polaroid{
	clear:both;
	padding:10px 10px 50px 10px;
	background:#fff;
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers
	but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:18px;
	
	-moz-box-shadow:1px 2px 5px #666666;
	-webkit-box-shadow:1px 2px 5px #666666;
}
.small-polaroid{
	clear:none;
	padding:10px 10px 25px 10px;
	
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
}
.small-polaroid:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	
	-moz-transform:rotate(4deg) scale(1.2);
	-webkit-transform:rotate(4deg) scale(1.2);
}