{ Learn Code. Share Code. Teach Code. Love Code. }

  • Finally Learned CSS Offsets

 #78704  by Master M1nd
 Fri Nov 08, 2013 4:06 pm
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:
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;
 #78705  by Filip
 Fri Nov 08, 2013 4:10 pm
Congratulations, way to go!
 #78709  by comathi
 Fri Nov 08, 2013 9:59 pm
You're very welcome. I'm glad to hear small and quick little tutorials like that one are useful to some people :)

Anyway, to solve your problem, all you have to do is add the following to your CSS code:
Code: Select all
.socialicons a
{
    display: inline-block;
    width:32px;
   height:32px;
}
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;
 #78713  by Filip
 Sat Nov 09, 2013 9:41 am
Or you can add onclick="document.location='url';"