• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2026 Replies
  • 331 Replies
    1928 Replies

Finally Learned CSS Offsets

User avatar
Master M1nd
Top Poster
Posts: 82

Finally Learned CSS Offsets

Fri Nov 08, 2013 5: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;

User avatar
Filip
Coding Guru
Posts: 834

Re: Finally Learned CSS Offsets

Fri Nov 08, 2013 5:10 pm

Congratulations, way to go!
CodenStuff wrote:Nope, it's just your sick and dirty mind. You sick twisted warped little pervo :D

User avatar
Master M1nd
Top Poster
Posts: 82

Re: Finally Learned CSS Offsets

Fri Nov 08, 2013 8:41 pm

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

User avatar
comathi
Coding God
Posts: 1242

Re: Finally Learned CSS Offsets

Fri Nov 08, 2013 10: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;

User avatar
Master M1nd
Top Poster
Posts: 82

Re: Finally Learned CSS Offsets

Sat Nov 09, 2013 7:44 am

Thanks, That works cooll;

User avatar
Filip
Coding Guru
Posts: 834

Re: Finally Learned CSS Offsets

Sat Nov 09, 2013 10:41 am

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 :D

Post Reply

Return to “Help & Support”