Iconite sociale cu ajutor CSS-ului

Data de inscriere : 15/08/2011

Previzualizare: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Cod:: margin:0;
min-height:100%;
padding:0;
width:100%;}

#container{
width:100%;
height:100%;
background:-moz-linear-gradient(center top , #FFFFFF, #efefef) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #efefef));}

#icons{}

.clearfix{
clear:both;
float:none;}

#lable{
font-size:24px;
color:#777;
margin-top:20px;
text-align:center;}

.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:55px;}

#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;
padding:0px;
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 Style ******************************/

#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));
}
/************** Facebook Style ******************************/

#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));
}
/************** RSS Style ******************************/
#rss{
background:-moz-linear-gradient(center top , #F09141, #E36443) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #F09141),color-stop(1, #E36443));
border:2px solid #E36443;
color:#FEFEFE;
float:left;

}
#rssContainer{
height:25px;
margin:3px;
overflow:hidden;
width:25px;
}
#rssContainer #outer{
-moz-border-radius:50px 50px 50px 50px;
-webkit-border-radius:50px 50px 50px 50px;
border:4px solid #FFFFFF;
height:40px;
margin-left:-22px;
margin-top:0;
width:40px;
}
#rssContainer #inner{
-moz-border-radius:16px 16px 16px 16px;
-webkit-border-radius:16px 16px 16px 16px;
border:4px solid #FFFFFF;
height:32px;
margin-left:-4px;
margin-top:4px;
width:32px;
}

#rssContainer #center{
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border:4px solid #FFFFFF;
height:0;
margin-left:18px;
margin-top:5px;
width:0;
}
#rss:hover{
background:-moz-linear-gradient(center top , #FF994F, #EF7959) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #FF994F),color-stop(1, #EF7959));
}
#rss:active{
background:-moz-linear-gradient(center top , #EF7959, #FF994F) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #EF7959),color-stop(1, #FF994F));
}
/************** google Style ******************************/
#google{
background:-moz-linear-gradient(center top , #4373DF, #243E81) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #4373DF),color-stop(1, #243E81));
border:2px solid #243E81;
float:left;

color:#FFFFFF;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:29px;
font-weight:bold;
line-height:18px;
text-align:center;
}
#google:hover{
background:-moz-linear-gradient(center top , #4F87FF, #31519F) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #4F87FF),color-stop(1, #31519F));
}
#google:active{
background:-moz-linear-gradient(center top , #31519F, #4F87FF) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #31519F),color-stop(1, #4F87FF));
}
/************** netVibes Style ******************************/
#netVibes{
background:-moz-linear-gradient(center top , #65D820, #138310) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #65D820),color-stop(1, #138310));
border:2px solid #138310;
float:left;

color:#fff;
font-family:Tahoma,arial,Georgia,"Time New Roman";
font-size:25px;
font-weight:bold;

}
#netVibes:hover{
background:-moz-linear-gradient(center top , #72EF2C, #219F1D) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #72EF2C),color-stop(1, #219F1D));
}
#netVibes:active{
background:-moz-linear-gradient(center top , #219F1D, #72EF2C) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #219F1D),color-stop(1, #72EF2C));
}
/************** orkut Style ******************************/
#orkut{
background:-moz-linear-gradient(center top , #FFFFFF, #A09F9D) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #A09F9D));
border:2px solid #A09F9D;
float:left;

}
#orkut #outerCircle{
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
background:-moz-linear-gradient(center top , #D779C0, #B62B91) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #D779C0),color-stop(1, #B62B91));
height:25px;
margin:3px 3px 0;
width:25px;
border:1px solid #B62B91;
}
#orkut #innerCircle{
-moz-border-radius:7px 7px 7px 7px;
-webkit-border-radius:7px 7px 7px 7px;
background:-moz-linear-gradient(center top , #D9D9D8, #C3C3C1) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #D9D9D8),color-stop(1, #C3C3C1));
height:14px;
margin:5px;
width:14px;
}

#orkut:hover{
background:-moz-linear-gradient(center top , #FFFFFF, #BFBFBF) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #BFBFBF));
}
#orkut:active{
background:-moz-linear-gradient(center top , #BFBFBF, #FFFFFF) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #BFBFBF),color-stop(1, #FFFFFF));
}
/************** Flickr Style ******************************/
#flickr{

float:left;
background:-moz-linear-gradient(center top , #FFFFFF, #A09F9D) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #A09F9D));
border:2px solid #A09F9D;
}
#flickr #leftCircle{
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
background-color:#2E7BE3;
float:left;
height:10px;
margin-left:4px;
margin-top:11px;
width:10px;
}
#flickr #rightCircle{
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
background-color:#EA3E94;
float:left;
height:10px;
margin-left:3px;
margin-top:11px;
width:10px;
}
#flickr:hover{
background:-moz-linear-gradient(center top , #FFFFFF, #BFBFBF) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #BFBFBF));
}
#flickr:active{
background:-moz-linear-gradient(center top , #BFBFBF, #FFFFFF) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #BFBFBF),color-stop(1, #FFFFFF));
}
/************** delicious Style ******************************/

#delicious{

float:left;
background:-moz-linear-gradient(center top , #FFFFFF, #A09F9D) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #A09F9D));
border:2px solid #A09F9D;
}
#delicious #upperDiv{
width:50%;
height:50%;
background-color:#123BF7;
-moz-border-radius:0 5px 0 0;
-webkit-border-radius:0 5px 0 0;
margin-left:16px;
}
#delicious #lowerDiv{
width:50%;
height:50%;
background-color:#000;
-moz-border-radius:0 0 0 5px;
-webkit-border-radius:0 0 0 5px;
}
#delicious:hover{
background:-moz-linear-gradient(center top , #FFFFFF, #BFBFBF) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #BFBFBF));
}
#delicious:active{
background:-moz-linear-gradient(center top , #BFBFBF, #FFFFFF) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #BFBFBF),color-stop(1, #FFFFFF));
}
/************** myspace Style ******************************/

#myspace{

float:left;
background-color:#005187;
border:2px solid #005187;
}
#myspace #lower{
float:left;
height:12px;
margin-left:3px;
margin-right:-2px;
margin-top:9px;
overflow:hidden;
width:8px;
}
#myspace #lower #head{
-moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
background-color:#FFFFFF;
height:6px;
margin-left:1px;
width:6px;
}
#myspace #lower #body{
-moz-border-radius:3px 3px 3px 3px;
-webkit-border-radius:3px 3px 3px 3px;
background-color:#FFFFFF;
height:15px;
width:8px;
}
#myspace #middle{
float:left;
height:19px;
margin-right:-2px;
margin-top:6px;
overflow:hidden;
width:10px;
}
#myspace #middle #head{
-moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
background-color:#FFFFFF;
margin-left:1px;
height:8px;
width:8px;
}
#myspace #middle #body{
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
background-color:#FFFFFF;
height:20px;
width:10px;
}

#myspace #upper{
height:26px;
margin-top:3px;
overflow:hidden;
width:12px;
}
#myspace #upper #head{
width:10px;
height:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-left:1px;
background-color:#fff;
}
#myspace #upper #body{
-moz-border-radius:6px;
-webkit-border-radius:6px;
background-color:#FFFFFF;
height:25px;
width:12px;
}
#myspace:hover{
background-color:#0072BF;
}
#myspace:active{
background-color:#13679F;
}
@font-face {
font-family: 'PicoWhiteRegular';
src: url('font/picow__-webfont.eot');
src: local('?'), url('font/picow__-webfont.woff') format('font/woff'), url('font/picow__-webfont.ttf') format('truetype'), url('font/picow__-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}

</style>

<div id='container'>

<div id='icons'>
<div id='linkedin' class='common'>
<span>in</span>
</div>
<div id='twitter' class='common'>
<span>t</span>
</div>
<div id='facebook' class='common'>
<span>f</span>
</div>
<div id='rss' class='common'>
<div id='rssContainer'>
<div id='outer'>
<div id='inner'>
<div id='center'></div>
</div>
</div>
</div>
</div>
<div id='flickr' class='common'>
<div id='leftCircle'> </div>
<div id='rightCircle'> </div>
<div class='clearfix'></div>
</div>
<div id='orkut' class='common'>
<div id='outerCircle'>
<div id='innerCircle'></div>
</div>
</div>
<div id='google' class='common'>
<span>g</span>
</div>
<div id='netVibes' class='common'>
<span>+</span>
</div>
<div id='delicious' class='common'>
<div id='upperDiv'></div>
<div class='clearfix'></div>
<div id='lowerDiv'></div>
</div>
<div id='myspace' class='common'>
<div id='lower'>
<div id='head'></div>
<div id='body'></div>
</div>
<div id='middle'>
<div id='head'></div>
<div id='body'></div>
</div>
<div id='upper'>
<div id='head'></div>
<div id='body'></div>
</div>
</div>
<div class='clearfix'></div>
</div>

Acest cod il puneti in "Foaie de stil CSS" !

» Cresterea FPS-ului

Iconite sociale cu ajutor CSS-ului

Iconite sociale cu ajutor CSS-ului

Subiecte similare

Subiecte similare