Finally Learned CSS Offsets
6 posts
Page 1 of 1
ASSLAM-O-ALAIKUM | HELLO
Well I am writing this post especially to thanks comathi.
Some days ago, he writes a post on CSS OFFSETS and i learned that, I use Social Icons for learning that, I also added transition effect in it.
MY CSS CODE:
MY HTML CODE
Guys Check it, and tell me how is it cooll;
Well I am writing this post especially to thanks comathi.
Some days ago, he writes a post on CSS OFFSETS and i learned that, I use Social Icons for learning that, I also added transition effect in it.
MY CSS CODE:
Code: Select all
.socialicons li {
display:inline-block;
width:32px;
height:32px;
background-image:url('http://4.bp.blogspot.com/-94xCOZSsMhI/Td9Cglmov5I/AAAAAAAAA4M/0kADSqbjdek/s1600/way2blogging-share-icons-sprite.png');
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.socialicons li.twitter {
background-position:0 0;
}
.socialicons li.twitter:hover {
background-position:0 -33px;
}
.socialicons li.facebook {
background-position: -32px 0;
}
.socialicons li.facebook:hover {
background-position:-32px -33px;
}
.socialicons li.stumbleupon {
background-position: -64px 0;
}
.socialicons li.stumbleupon:hover {
background-position: -64px -33px;
}
.socialicons li.mixx {
background-position: -96px 0;
}
.socialicons li.mixx:hover {
background-position: -96px 33px;
}
.socialicons li.google {
background-position: -128px 0;
}
.socialicons li.google:hover {
background-position: -128px 33px;
}
.socialicons li.reditt {
background-position: -160px 0;
}
.socialicons li.reditt:hover {
background-position: -160px 33px;
}
.socialicons li.digg {
background-position: -192px 0;
}
.socialicons li.digg:hover {
background-position: -192px 33px;
}
.socialicons li.youtube {
background-position: -223px 0;
}
.socialicons li.youtube:hover {
background-position: -223px 33px;
}
.socialicons li.linkedin {
background-position: -255px 0;
}
.socialicons li.linkedin:hover {
background-position: -255px 33px;
}
.socialicons li.rss {
background-position: -287px 0;
}
.socialicons li.rss:hover {
background-position: -287px 33px;
}
.socialicons li.skype {
background-position: -319px 0;
}
.socialicons li.skype:hover {
background-position: -319px 33px;
}
.socialicons li.newsvine {
background-position: -351px 0;
}
.socialicons li.newsvine:hover {
background-position: -351px -33px;
}
.socialicons li.friendfeed {
background-position: -383px 0;
}
.socialicons li.friendfeed:hover {
background-position: -383px -33px;
}
.socialicons li.technorati {
background-position: -415px 0;
}
.socialicons li.technorati:hover {
background-position: -415px 33px;
}
.socialicons li.yahoo {
background-position:-447px 0;
}
.socialicons li.yahoo:hover {
background-position:-447px 33px;
}
.socialicons li.delicious {
background-position: -479px 0;
}
.socialicons li.delicious:hover {
background-position: -479px 33px;
}
.socialicons li.myspace {
background-position:-511px 0;
}
.socialicons li.myspace:hover {
background-position:-511px 33px;
}
.socialicons li.flickr {
background-position:-543px 0;
}
.socialicons li.flickr:hover {
background-position:-543px 33px;
}
MY HTML CODE
Code: Select all
<div class="socialicons">
<ul>
<li class="twitter"><a href="#"></a></li>
<li class="facebook"><a href="#"></a></li>
<li class="stumbleupon"><a href="#"></a></li>
<li class="mixx"><a href="#"></a></li>
<li class="google"><a href="#"></a></li>
<li class="reditt"><a href="#"></a></li>
<li class="digg"><a href="#"></a></li>
<li class="youtube"><a href="#"></a></li>
<li class="linkedin"><a href="#"></a></li>
<li class="rss"><a href="#"></a></li>
<li class="skype"><a href="#"></a></li>
<li class="newsvine"><a href="#"></a></li>
<li class="friendfeed"><a href="#"></a></li>
<li class="technorati"><a href="#"></a></li>
<li class="yahoo"><a href="#"></a></li>
<li class="delicious"><a href="#"></a></li>
<li class="myspace"><a href="#"></a></li>
<li class="flickr"><a href="#"></a></li>
</ul>
Guys Check it, and tell me how is it cooll;
Congratulations, way to go!
CodenStuff wrote:Nope, it's just your sick and dirty mind. You sick twisted warped little pervo![]()
But I Didn't notice, that i can't add links cryer;
How to add links for facebook - twitter etc cryer;
How to add links for facebook - twitter etc cryer;
You're very welcome. I'm glad to hear small and quick little tutorials like that one are useful to some people ![Smile :)](./images/smilies/icon_e_smile.gif)
Anyway, to solve your problem, all you have to do is add the following to your CSS code:
![Smile :)](./images/smilies/icon_e_smile.gif)
Anyway, to solve your problem, all you have to do is add the following to your CSS code:
Code: Select all
If I remember correctly, anchor tags (or <a>) aren't displayed as blocks, by default, so you have to explicitly give them a size and a display type in the CSS code if you want to do anything fancy with them cooll;.socialicons a
{
display: inline-block;
width:32px;
height:32px;
}
Or you can add onclick="document.location='url';"
CodenStuff wrote:Nope, it's just your sick and dirty mind. You sick twisted warped little pervo![]()
6 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023