Pure CSS social media icons
By Nicolas Gallagher
Amended by rmsql
For a detailed explanation. Read the article: Pure CSS social media icons (experimental).For amended version demo, please click here.
Step 1: Place the following code just before the </head> tag
<style>
/* ------------------------------------------
PURE CSS SOCIAL MEDIA ICONS (EXPERIMENTAL)
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-social-media-icons/
http://nicolasgallagher.com
http://twitter.com/necolas
Created: 10 March 2010
Version: 1.0
Dual licensed under MIT and GNU GPLv2 � Nicolas Gallagher
amended by : fnf1959@gmail.com
------------------------------------------ */
/* ------------------------------------------------------------------------------------
-- GENERAL STYLES
------------------------------------------------------------------------------------ */
body {padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff;}
h2 a:link,
h2 a:visited,
p a:link,
p a:visited {border-bottom:1px solid #c55500; color:#c55500; text-decoration:none;}
h2 a:visited,
p a:visited {border-bottom:1px solid #730800; color:#730800;}
h2 a:hover,
h2 a:focus,
h2 a:active,
p a:hover,
p a:focus,
p a:active {border:0; color:#fff; background:#c55500;}
h2 a:visited:hover,
h2 a:visited:focus,
h2 a:visited:active,
p a:visited:hover,
p a:visited:focus,
p a:visited:active {color:#fff; background:#730800;}
#container {width:500px; padding:0 0 100px; margin:0 auto;}
h1 {margin:1em 0 0; font-size:2.5em; font-weight:normal; line-height:1.2; text-align:center;}
h2 {margin:0.5em 0 1.5em; font-size:1.25em; font-weight:normal; font-style:italic; text-align:center;}
p {margin:1em 0;}
.follow {clear:both; margin-top:2em; font-size:1.125em;}
.follow span {font-weight:bold;}
/* ------------------------------------------------------------------------------------
-- ICON SET
------------------------------------------------------------------------------------ */
ul {
list-style:none;
padding:0;
margin:0;
overflow:hidden;
font:0.875em/1 Arial, sans-serif;
}
ul li {
float:left;
width:66px;
height:66px;
margin:20px 20px 0 0;
}
ul li a {
display:block;
width:64px;
height:64px;
overflow:hidden;
border:1px solid transparent;
line-height:64px;
text-decoration:none;
/* css3 */
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px; /* standards version last */
}
ul li a:hover,
ul li a:focus,
ul li a:active {
opacity:0.8;
border-color:#000;
}
/* ------------------------------------------------------------------------------------
------------------------------------------------------------------------------------ */
.facebook a {
position:relative;
border-color:#3c5a98;
text-transform:lowercase;
text-indent:34px;
letter-spacing:10px;
font-weight:bold;
font-size:64px;
line-height:66px;
color:#fff;
background:#3c5a98;
/* css3 */
/* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
}
/* ------------------------------------------------------------------------------------
------------------------------------------------------------------------------------ */
.twitter a {
position:relative;
border-color:#a8eaec;
text-transform:lowercase;
text-indent:20px;
letter-spacing:40px;
font:bold 60px/1 Tahoma, sans-serif;
line-height:60px;
color:#76DDF8;
background:#daf6f7;
/* css3 */
text-shadow: 3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff;
/* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#dbf7f8), to(#88e1e6));
background:-moz-linear-gradient(top, #dbf7f8, #88e1e6);
}
/* ------------------------------------------------------------------------------------
-- rmsql
------------------------------------------------------------------------------------ */
.rmsql a {
position:relative;
border-color:#a8eaec;
text-transform:lowercase;
text-indent:20px;
letter-spacing:40px;
font:bold 60px/1 Tahoma, sans-serif;
line-height:60px;
color:#fff;
background:#138210;
/* css3 */
/* text-shadow: 3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff;*/
/* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#68db21), to(#138210));
background:-moz-linear-gradient(top, #68db21, #138210);
}
/* ------------------------------------------------------------------------------------
------------------------------------------------------------------------------------ */
.linkedin a {
position:relative;
width:60px;
overflow:hidden;
padding:0 2px;
border-color:#185c80;
text-transform:lowercase;
text-indent:-185px;
font-size:64px;
font-weight:bold;
color:#fff;
background:#0c6596;
/* css3 */
/* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#5babcb), to(#0c6596));
background:-moz-linear-gradient(top, #5babcb, #0c6596);
}
/* ------------------------------------------------------------------------------------
------------------------------------------------------------------------------------ */
.reddit a {
position:relative;
width:60px;
overflow:hidden;
padding:0 2px;
border-color:#185c80;
text-transform:lowercase;
text-indent:-185px;
font-size:64px;
font-weight:bold;
color:#b62b91;
background:#fff;
/* css3 */
/* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ceddf6));
background:-moz-linear-gradient(top, #fff, #ceddf6);
}
</style>
Step 2: Place the following code where you want it to appear on your page
<div class="content">
<ul>
<li class="facebook"><a
href="javascript:void(window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(document.location),'facebook','status=1,toolbar=0,menubar=0,resizable=1,location=1,scrollbars=1,width=680,height=450'));"
title="Share on Facebook">Facebook</a></li>
<li class="twitter"><a
href="javascript:void(window.open('http://twitter.com/home/?status='+encodeURIComponent(document.title)+'+'+encodeURIComponent(document.location),'twiiter','status=1,toolbar=0,menubar=0,resizable=1,location=1,scrollbars=1,width=680,height=450'));"
title="Share on Twitter">Twitter</a></li>
<li class="linkedin"><a
href="javascript:void(window.open('http://www.linkedin.com/shareArticle?mini=true&url='+encodeURIComponent(document.location)+'&title='+encodeURIComponent(document.title)+'&source='+encodeURIComponent(document.location),'reddit','status=1,toolbar=0,menubar=0,resizable=1,location=1,scrollbars=1,width=680,height=450'));"
title="Share on LinkedIn">LinkedIn</a></li>
<li class="reddit"><a
href="javascript:void(window.open('http://reddit.com/submit?url='+encodeURIComponent(document.location)+'&title='+encodeURIComponent(document.title),'reddit','status=1,toolbar=0,menubar=0,resizable=1,location=1,scrollbars=1,width=680,height=450'));"
title="Share on Reddit">redditrd</a></li>
<li class="rmsql"><a
href="javascript:void(window.open('http://rmsql.info/weblib/lbsubmitlinkedit.php?addnew=yes&lburl='+encodeURIComponent(document.location)+'&lbtitle='+encodeURIComponent(document.title)+'&lbhostname='+encodeURIComponent(document.location.hostname),'WebMark','status=1,toolbar=0,menubar=0,resizable=1,location=1,scrollbars=1,width=680,height=450'));"
title="Share on rmsql">rmsql</a></li>
</ul>
</div>
Blue Ocean Accounting Software - Free for commercial and personal use
No comments:
Post a Comment