After attend­ing an Event Apart Boston I’ve started to really see the poten­tial of CSS 3.0 that can be used today. A few things that stood out through­out the 2-day con­fer­ence have been out­lined below.

Rounded Cor­ners using border-radius

I used this method to cre­ate the rounded tab nav­i­ga­tion on Next Step Liv­ing. It’s well sup­ported by browsers, and can be used in Fire­fox 3.5, Safari and Chrome. If you need func­tion­al­ity in IE check out the Curved Cor­ner project.

div.rounded {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

Inner shadow using box-shadow

This one works great with images, or just plain text. It’s well sup­ported by the usu­aly sus­pects, but isn’t cur­rently sup­ported in IE. If you need IE sup­port take a look at adding this CSS method to repli­cate the effects: fil­ter: progid:DXImageTransform.Microsoft.Shadow(color=’#969696′, Direction=135, Strength=3);.

div.inner-shadow {
	-moz-box-shadow: inset 0 0 10px #000; /* for Firefox 3.5+ */
   	-webkit-box-shadow: inset 0 0 10px #000; /* for Safari and Chrome */
   	box-shadow: inset 0 0 10px #000; /* CSS 3 Spec */
}

Drop shadow using box-shadow

This is essen­tially the same method used for the inner shadow above, just a dif­fer­ent approach to place the shadow on the out­side of the element.

div.drop-shadow {
	-moz-box-shadow: 2px 2px 3px #999; /* for Firefox 3.5+ */
	-webkit-box-shadow: 2px 2px 3px #999; /* for Safari and Chrome */
	box-shadow: 2px 2px 3px #999;  /* CSS 3 Spec */
}

Awe­some form but­tons and submits

This is pulled directly from Dan Cederholm’s demo site used dur­ing his 2010 Event Apart Boston pre­sen­ta­tion, Things we left on the moon. It degrades grace­fully accross all browsers, so it may not look the same in IE; but pro­vides the behav­ioral actions needed for users to com­plete a task.

input[type="submit"] {
	padding: 8px 15px;
	font-family: Helvetica;
	font-weight: bold;
	line-height: 1;
	color: #444;
	border: none;
	text-shadow: 0 1px 1px rgba(255,255,255,.85);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
	background-image: -moz-linear-gradient(0% 100% 90deg,#bbb, #fff);
	-webkit-border-radius: 23px;
	-moz-border-radius: 23px;
	border-radius: 23px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
	box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
input[type="submit"]:hover {
	color: #333;
	-webkit-animation-name: pulse;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

Cre­ate a circle!

This cre­ative tech­nique is thanks to the Web Designer Wall arti­cle, Beau­ti­ful CSS3 Search Form

.circle {
	width: 100px;
	height: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
}

Great resources!

1. Sim­pleBits: Things we left on the moon
2. Smash­ing Mag­a­zine: Push Your Web Design Into The Future
3. Smash­ing Mag­a­zine: Take Your Design to The Next Level with CSS3
4. CSS3.info
5. CSS3 Gra­di­ent Buttons
6. Beau­ti­ful CSS3 Search Form

More to come!

This arti­cle only scratches the sur­face of what can be achieved using CSS3. It is hope­fully the first of many CSS3 related arti­cle I’ll be post­ing. Let me know if you have any thoughts or suggestions!