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
Chuck
Aug 26th, 2014
Ya learn sohinmetg new everyday. It’s true I guess!
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
-
–
–
–
–
–
-
Johnk479
May 30th, 2014
Thank you for your blog article. Great. babkfedcdddk
syngenta
Oct 21st, 2014
Hi, i believe that i noticed you visited my weblog so
i came to go back the want?.I am attempting to to find issues to enhance my site!I guess its ok to use a
few of your ideas!!
Anand
Mar 4th, 2015
Thank you
Nikole lovekin
Oct 8th, 2016
Hi there everyone, it’s my first go to see at this web site,
and piece of writing is in fact fruitful in support of me, keep up posting such articles or reviews.