Ultimele subiecte
» [All Version] Social Link/Icons
Scris de Jean01Crv 13/10/2014, 12:52 pm

» (pHpBB3) Legenda : Sistem Nou
Scris de Jean01Crv 13/10/2014, 12:49 pm

» Imagine la Statistici & Cine este Conectat ? [pHpBB3]
Scris de Jean01Crv 13/10/2014, 12:44 pm

» Statistici - Sistem Nou [pHpBB3]
Scris de Jean01Crv 13/10/2014, 12:20 pm

» [Prezentare]Chozen
Scris de valyd1971 16/5/2014, 12:54 am

Vizitator Vizitator
Cine este conectat?
In total sunt 4 utilizatori conectati: 0 Inregistrati, 0 Invizibil si 4 Vizitatori :: 1 Motor de cautare

Nici unul

[ Vizualizeaza toata lista ]


Recordul de utilizatori conectati a fost de 42, 1/11/2012, 8:58 am

How to Create Social Media Icons with CSS3

Vezi subiectul anterior Vezi subiectul urmator In jos

How to Create Social Media Icons with CSS3

Mesaj Scris de Site Admin la data de 17/3/2012, 10:20 am

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

avatar
Site Admin
Client


Vezi profilul utilizatorului

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus


 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum