How to Create Social Media Icons with CSS3

Its being so long when I posted a Pure CSS3 article i.e. Sexy Image Hover Effect. So,
today I came up with some social site icons made in only CSS3. No
images are used for this. To create social icons I have used
gradient,radius property.
Here is the snapshot of social media icons about which I’m talking about.
To view the original output please visit Social Media Icons CSS3 DEMO

Now let go through the code.
Common CSS

Cod:




.common{text-shadow:0 -2px 0 rgba(0, 0, 0, 0.5);-moz-border-radius:5px;-webkit-border-radius:5px;height:32px;width:32px;text-align:center;-moz-box-shadow:2px 2px 4px #ABABAB;-webkit-box-shadow:2px 2px 4px #ABABAB;cursor:pointer;margin-left:30px}

HTML

Cod:



<div id='facebook' class='common'><span>f</span></div>

CSS

Cod: #facebook{float:left;background:-moz-linear-gradient(center top , #4AA9ED, #2E73B8) repeat scroll 0 0 transparent;background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #4AA9ED),color-stop(1, #2E73B8));border:2px solid #518EC4;color:#FEFEFE;font-family:arial,Times New Roman;font-size:28px;font-weight:bold}#facebook span{}#facebook:hover{background:-moz-linear-gradient(center top , #4FB8FF, #378CDF) repeat scroll 0 0 transparent;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4FB8FF),color-stop(1,#378CDF))}#facebook:active{background:-moz-linear-gradient(center top , #378CDF, #4FB8FF) repeat scroll 0 0 transparent;background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #378CDF),color-stop(1, #4FB8FF))} Twitter: HTML Cod: <div id='twitter' class='common' ><span>t</span></div> CSS Cod: #twitter{float:left;background:-moz-linear-gradient(center top , #C0F0F2, #6FCFCE) repeat scroll 0 0 transparent;background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #C0F0F2),color-stop(1, #6FCFCE));border:2px solid #78D1D7;color:#FEFEFE;font-family:PicoWhiteRegular,arial,Times New Roman;font-size:30px}#twitter:hover{background:-moz-linear-gradient(center top , #BFFDFF, #86EAEF) repeat scroll 0 0 transparent;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#BFFDFF),color-stop(1,#86EAEF))}#twitter:active{background:-moz-linear-gradient(center top , #6FCFCE, #C0F0F2) repeat scroll 0 0 transparent;background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #6FCFCE),color-stop(1, #C0F0F2))} Here I have just given Facebook and Twitter CSS. Click download button below to download the files. I really had a great time in building these icon , hope you guys like them .Please drop some comments here…CSS3 social me Sursa : CSS - CSS3