Breadcrumbs

[Master M1nd]

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;

[Filip]

Congratulations, way to go!

[Master M1nd]

But I Didn't notice, that i can't add links cryer;
How to add links for facebook - twitter etc cryer;

[comathi]

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;

[Master M1nd]

Thanks, That works cooll;

[Filip]

Or you can add onclick="document.location='url';"