CSS: create social network icons

CSS3 allows us to control almost every aspect of the visual layout of an element: properties such as border-radius, text-shadow, opacity combined with gradients and web fonts gives us a first-class control over elements. We can combine all these features to create the icons of social network. Look ma, no images!

We have the following markup

<div id="social">
	<a href="#" title="Facebook" id="facebook"><span>f</span></a>
	<a href="#" title="Twitter" id="twitter"><span>t</span></a>
</div>

with the following styles:

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
@import url(http://fonts.googleapis.com/css?family=Hammersmith+One);

#social {
	height: 4em;
}

#social a {
	float: left;
	width: 4em;
	height: 4em;
	margin-right: 1em;
	text-decoration: none;
	text-align: center;
}

#facebook {
	background: #84a4cd;
background: -moz-linear-gradient(top, #84a4cd 0%, #577ca9 50%, #335481 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#84a4cd), color-stop(50%,#577ca9), color-stop(100%,#335481));
background: -webkit-linear-gradient(top, #84a4cd 0%,#577ca9 50%,#335481 100%);
background: -o-linear-gradient(top, #84a4cd 0%,#577ca9 50%,#335481 100%);
background: -ms-linear-gradient(top, #84a4cd 0%,#577ca9 50%,#335481 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84a4cd', endColorstr='#335481',GradientType=0 );
background: linear-gradient(top, #84a4cd 0%,#577ca9 50%,#335481 100%);
	color: #fff;
	border: 1px solid #416493;
	border-radius: 5px;
	font-family: 'Droid Sans', sans-serif;
}

#facebook span {
	font-size: 4em;
	font-weight: bold;
	opacity: 0.8;
	text-shadow: 2px 2px 2px #3d5573;
}

#twitter {

	background: #92d3d9;
background: -moz-linear-gradient(top, #92d3d9 0%, #7cbbc1 50%, #3a8188 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#92d3d9), color-stop(50%,#7cbbc1), color-stop(100%,#3a8188));
background: -webkit-linear-gradient(top, #92d3d9 0%,#7cbbc1 50%,#3a8188 100%);
background: -o-linear-gradient(top, #92d3d9 0%,#7cbbc1 50%,#3a8188 100%);
background: -ms-linear-gradient(top, #92d3d9 0%,#7cbbc1 50%,#3a8188 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92d3d9', endColorstr='#3a8188',GradientType=0 );
background: linear-gradient(top, #92d3d9 0%,#7cbbc1 50%,#3a8188 100%);
color: #fff;
border: 1px solid #4b949c;
border-radius: 5px;
font-family: 'Hammersmith One', sans-serif;

}

#twitter span {
	font-size: 4em;
	font-weight: bold;
	opacity: 0.8;
	text-shadow: 2px 2px 2px #5c8285;
}

I've used a color picker to get the original color values from the real icons. You can see the demo below.

Demo

Live demo