Home : Forums : Authoring and Programming : How to Make a CSS3 Floating Follow Tab with Rollover Effects

How to Make a CSS3 Floating Follow Tab with Rollover Effects

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register
22-Oct-10 00:00
DeleteDelete EditEdit
Elated Elated's avatar Rank: gold
Gold
Posts: 292
From: Brighton, UK
This is a forum topic for discussing the article "How to Make a CSS3 Floating Follow Tab with Rollover Effects":

http://www.elated.com/articles/css3-floating-follow-tab-with-rollover-effects/

Learn how to use CSS3 to create a nice, translucent Newsletter/RSS/Twitter/Facebook tab with rounded corners, gradient background and drop shadow. Full example and code download included.

[Edited by matt on 22-Oct-10 04:46]
01-Dec-10 23:47
DeleteDelete EditEdit
mguerra79 mguerra79's avatar Rank: bronze
Bronze
Posts: 59
From: Viseu, Portugal
Niiiice... I need to start learning this stuff!
Thank you for this post!

Cheers from Portugal!

Márcio Guerra

--
There are only 2 infinite things, the universe and mens stupidity, and Im not shure about the first one!

Or something like it...
By Albert Einstein
02-Dec-10 21:11
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
Thanks Márcio. I hope you found the article helpful!

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
03-Dec-10 21:49
DeleteDelete EditEdit
mguerra79 mguerra79's avatar Rank: bronze
Bronze
Posts: 59
From: Viseu, Portugal
Of course I did. The question is «when do I get some discipline to start learning this properly»?

I don't know what I do to my time, and the time I should be spending learning, whatever, I'm not doing it. However, thanks to the power of the web, I can always get back to this kind of tutorials (yours are really good, specially in the «web department») and do it whenever I want to...

So, thank you, and believe me, it is very helpful!

Cheers from Portugal and Merry Xmas to you all!

Márcio Guerra

--
There are only 2 infinite things, the universe and mens stupidity, and Im not shure about the first one!

Or something like it...
By Albert Einstein
15-Feb-11 20:33
DeleteDelete EditEdit
psolomon psolomon's avatar Rank: none
No stars yet
Posts: 17
From: Seattle, WA, USA
Greetings Matt,

How do I change the color of the tab itself? The two color values most apparent to me were in these lines of code...


  /* Add the semitransparent gradient background */
  background: rgba(239, 91, 10, .75);
  background: -moz-linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75));
  background: -webkit-gradient( linear, left top, left bottom, from( rgba(243, 52, 8, .75) ), to( rgba(239, 91, 10, .75) ) );
  background: linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75));
  filter: progid:DXImageTransform.Microsoft.Gradient( startColorStr='#c0f33408', endColorStr='#c0ef5b0a', GradientType=0 );
}


...and I changed both values, but to no avail.


Philip
17-Feb-11 04:17
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@psolomon: That's the right chunk of code, but you need to change all the colour values. The first line is the fallback background colour if the browser doesn't support gradients, while the remaining lines all specify gradients with start and end colour stops.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
22-Feb-11 14:26
DeleteDelete EditEdit
webgodjj webgodjj's avatar Rank: none
No stars yet
Posts: 1
From: Madison, WI, United States
I think it would be best to not use display:none for the spans. Instead: positions: absolute; left: -2000px;
Reason: Display none is not supported by most accessible screen readers. And though not an issue now, possibly search engines might start banning display:none from results.
22-Feb-11 20:53
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@webgodjj: Good call - that's a bad habit of mine! I've now changed it in the article, demo, code download, and www.elated.com - phew

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
19-May-11 17:02
DeleteDelete EditEdit
Sueli Sueli's avatar Rank: none
No stars yet
Posts: 1
Thank you. I had been looking all over for a tutorial on how to do these floating tabs!
19-May-11 23:56
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@Sueli: You're welcome - glad you found what you were looking for

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
09-Mar-12 23:00
DeleteDelete EditEdit
incrowdsource incrowdsource's avatar Rank: none
No stars yet
Posts: 1
Very nice and easy copy&paste script, I've created a variation of the script with a dark background, left aligned and with free-for-commercial purposes icons, here's the code:

HTML

<div id="followTab">
  	<a class="facebook" href=""></a>
  	<a class="twitter" href=""></a>
  	<a class="google" href=""></a>
  	<a class="linkedin" href=""></a>
	<a class="digg" href=""></a>
	<a class="delicious" href=""></a>
	<a class="stumbleupon" href=""></a>
	<a class="rss" href=""></a>
</div>


CSS Style:

div#followTab {  list-style: none;  position: fixed;  z-index: 1;
  left: 0;  top: 450px;  background-image:url('./images/grey-transparent.png');  width: 26px;  padding: 8px 5px;  border: 1px solid #ababab;  border-left: none;
  -moz-box-shadow: 0px 0px 8px #000000;
  -webkit-box-shadow: 0px 0px 8px #000000;
  box-shadow: 0px 0px 8px #000000;
}
#followTab a {width:24px; height:26px;}
#followTab a.facebook  {display:block;background: url("images/sticky_facebook.png") 0 0 no-repeat;}
#followTab a.twitter  {display:block; background: url("images/sticky_twitter.png") 0 0 no-repeat;}
#followTab a.google  { display:block; background: url("images/sticky_google.png") 0 0 no-repeat; }
#followTab a.linkedin { display:block; background: url("images/sticky_linkedin.png") 0 0 no-repeat;}
#followTab a.delicious  {display:block; background: url("images/sticky_delicious.png") 0 0 no-repeat; }
#followTab a.digg  { display:block; background: url("images/sticky_digg.png") 0 0 no-repeat; }
#followTab a.rss { display:block; background: url("images/sticky_rss.png") 0 0 no-repeat; }
#followTab a.stumbleupon  { display:block; background: url("images/sticky_stumbleupon.png") 0 0 no-repeat; }

#followTab a.facebook:hover,#followTab a.google:hover, #followTab a.twitter:hover, #followTab a.linkedin:hover, #followTab a.digg:hover, #followTab a.stumbleupon:hover, #followTab a.rss:hover, #followTab a.delicious:hover  {
  background-position: -25px; }


The 3D box icons can be downloaded from here and uploaded to /images/ folder: http://www.incrowdsource.com/files/social_sticky.zip

You can see this version of the script in action @ http://www.incrowdsource.com/index.php
20-Mar-12 01:25
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@incrowdsource: Thanks for posting your variation!

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
 
New posts
Old posts

Follow Elated