Social Icons in CSS3
by nikesh on 30/04/10 at 11:52 pm
After Beautiful sunset wallpaper , I came up with some social site icons made in only CSS3.For those icons I have used gradient,radius property.
Below I have attached the snapshot , to view the original output please visit DEMO.
Now let go through the code.
Common CSS
.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;
}
Linkedin:
HTML
<div id='linkedin' class='common' >
<span>in</span>
</div>
CSS
#linkedin{
background:-moz-linear-gradient(center top , #71B9D6, #0074A6)
repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,
color-stop(0, #71B9D6),color-stop(1, #0074A6));
border:2px solid #245B91;
color:#FEFEFE;
font-family:Century Gothic,arial,Times New Roman;
font-size:25px;
font-weight:bold;
float:left;
display:block;
}
#linkedin:hover{
background:-moz-linear-gradient(center top , #77CDEF, #0B8CBF)
repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,
color-stop(0, #77CDEF),color-stop(1, #0B8CBF));
}
#linkedin:active{
background:-moz-linear-gradient(center top , #0074A6, #71B9D6)
repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,
color-stop(0, #0074A6),color-stop(1, #71B9D6));
}
Twitter:
HTML
<div id='twitter' class='common' >
<span>t</span>
</div>
CSS
#twitter{
margin-left:10px;
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:PicoWhite,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 Linkedin and Twitter CSS.You can download complete CSS and Html file from here(.rar) or here(.zip).
I really had a great time in building these icon , hope you guys like them .Please drop some comments here.
Vivek
May 1st, 2010
Awesome buddy , this was pretty nice thing and as no images so faster loading times . Build some more of this stuff like CSS3 only buttons, gradients, containers etc. & you will be highly thanked by the design community including me
admin
May 1st, 2010
@thanks vivek … and surly you will find some interesting and useful post here soon …
Stan
May 1st, 2010
Hay, cool, but I feel discriminated because I use Opera and had to go to another browser to see the demo. Same MS users, but who cares about them
So I really think in a non-demo it should be:
…
-moz-border-radius:5px;
-webkit-border-radius:5px;
-opera-border-radius:5px;
-ms-border-radius:5px;
…
admin
May 1st, 2010
thanks for the input. But this is just a showcase of possibilities of CSS3.
But these browser specific styles will definitely be a big pain for web developer later on.
Social icons in CSS3
May 1st, 2010
[...] full post on Hacker News If you enjoyed this article, please consider sharing it! Tagged with: CSS3 • [...]
steve
May 1st, 2010
Very nice work. All the icons look beautiful
Kyre
May 1st, 2010
This is brilliant. I wish I thought of it
Thank you very much for posting this!
nikesh
May 1st, 2010
@Kyre @Steve … Thank you so much guys….
Matt
May 1st, 2010
It’d be cool to see one for Yahoo Buzz
MarkSpizer
May 2nd, 2010
great post as usual!
Yassine
May 4th, 2010
I like everything on the post except the rar file ! please use a zip instead
nikesh
May 4th, 2010
@Yassine. .. thanks ..
now you can download the file in both formates ….go and get the files from http://www.nikesh.me/demo/social_icons.html .
Luffy
May 19th, 2010
= ) Awesome!! So impressive works on CSS3. Nikesh
Destillat #45 Web- und Softwareentwicklung | Open Source und Wetware
May 22nd, 2010
[...] Social Icons in CSS3 [...]
The Ultimate CSS3 Toolbox: 50+ Resources, Tutorials and Articles | CreativeFan
Jun 9th, 2010
[...] Social Icons in CSS3 [...]
nferrari
Jun 23rd, 2010
Hi, how to make it work with the Twitter font ?
Joacim Boive
Mar 22nd, 2011
Nice work!
You do get some benefits with this approach – like that the fidelity is kept even when user zooms in (like on a phone/pad). But it’s hardly something that will improve performance.
There’s the extra download of the font (an additional request) and it’s a whopping 32kb. Put those images in a CSS sprite or better yet: Base64 encode them and include them in the stylesheet = NO extra request and maybe what? 10kb in filesize.
Nice, creative work. But it’s not the best performance enhancer.
/J
slapstick
Mar 22nd, 2011
Me likes<3
Thank you very much for the tutorial!
NIKESH
May 28th, 2011
Thank you very much for the tutorial!
TOFIK
May 28th, 2011
I like everything on the post except the rar file ! please use a zip instead
nikesh
May 28th, 2011
@nikesh .. thanks for your comment .
@TOFIK … thanks for this point …
uk directory
Jan 4th, 2012
Hi my friend! I wish to say that this article is amazing, great written and include approximately all significant infos. I’d like to see extra posts like this .
incodicsaisee
Feb 6th, 2013
-
–
–
–
–
–
-