CSS: creare le icone dei social network

Oggi i CSS3 ci consentono di controllare l'ombreggiatura del testo, i bordi arrotondati, i gradienti, l'opacità degli elementi e di usare i web fonts in modo cross-browser. Combinate insieme, queste caratteristiche ci permettono di realizzare effetti molto interessanti, come quello delle icone dei social network interamente generate dai CSS. Vediamo l'esempio.

Abbiamo una marcatura minimale:

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

A cui applicheremo i seguenti stili:

@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;
}

Abbiamo usato tutte le tecniche poc'anzi accennate, grazie all'ausilio del color picker di un editor di immagini con cui abbiamo analizzato i modelli originali delle icone dei social network.

Potete visionare l'esempio finale in questa pagina.