CSS Globe
posted on:April 24, 2008
I thought of writing a series of tutorials for various link techniques. When I start writing I realized that they are pretty simple (yet effective ) and it might be better to have them summarized.
Links (A tags) are one of the most important elements on your document. There wouldn’t be any navigation without it, would it :)? The main feature that made following techniques possible is cross browser :hover pseudo class support. Each of these techniques is pure css, no ugly hacks, no JavaScript.
Download link techniques
To make this work you’ll need markup like this:
<a class="#">Title <span>Tooltip</span></a>
Anchor is given position:relative and span is placed absolute and styled separately. We initially hide the span element and show it only when user hovers the link (using a:hover span selector).
Here’s the css:
a{ z-index:10; } a:hover{ position:relative; z-index:100; } a span{ display:none; } a:hover span{ display:block; position:absolute; float:left; white-space:nowrap; top:-2.2em; left:.5em; background:#fffcd1; border:1px solid #444; color:#444; padding:1px 5px; z-index:10; }
See this technique in action
In this trick we’ll show large images when thumbnails are rolled over. We’re using unordered list. In each list item we’ll place an anchor eith two images, one thumbnail and one full size. Full size image is placed inside an span that we initially hide. When thumb is rolled over we set display block to hidden span and that way we display a large image.
Html structure looks like this:
<li> <a class="#"> <img src="/img/spacer.gif">and css:
ul#gallery, ul#gallery li{ margin:0; padding:0; list-style:none; } ul#gallery{ px; px; position:relative; background:#e1e1e1 url(images/bg_preview.gif) no-repeat 50% 40%; } ul#gallery li{ float:left; display:inline; margin-top:300px; } ul#gallery a span{ display:none; } ul#gallery a:hover{ background:none; z-index:100; } ul#gallery a:hover span{ position:absolute; px; px; float:left; top:0; left:0; display:block; }See this technique in action
Pure Css Image Resizer
I once wrote about thumbnail resizing where image’s visible area was resized. This trick will display larger image on mouse over and give an effect of real resized image. To achieve this we’ll use similar set up as in previous example – two images, one small and one large, inside one anchor tag. Larger image is initially hidden, showed only on roll over. Since the large image is placed on top of the small one, it looks like the image has been scaled up.
Html:
<li> <a class="#"> <em><img src="/img/spacer.gif">Css:
ul#gallery, ul#gallery li{ margin:0; padding:0; list-style:none; } ul#gallery{ margin:2em 0; } ul#gallery li{ float:left; display:inline; margin-right:5px; } ul#gallery a{ float:left; display:inline; position:relative; } ul#gallery a:hover{ background:none; z-index:100; } ul#gallery a span{ display:none; } ul#gallery a:hover span{ float:left; display:block; cursor:pointer; } ul#gallery a:hover em{ display:none; } ul#gallery a img{ border:1px solid #999; padding:2px; background:#fff; } ul#gallery a:hover img{ border:1px solid #000; }See this technique in action
3D Button Effect
This is a simple effect of a button being pushed. We need an anchor with nested span. Top and left borders are "lightened" while right and bottom are "shaded". To add more shading we’ll add right and bottom border to the span as well. On mouse over we invert the border colors. Changing borders will offset the nested span one pixel to the down and to the right.
Note, In my example I have used floated anchors to get desired height, but this can be done on inline anchors as well.Html looks like this
<a class="#" class="button"><span>Roll over here</span></a>and css
a.button{ float:left; %; font-weight:bold; border-top:1px solid #999; border-left:1px solid #999; border-right:1px solid #333; border-bottom:1px solid #333; color:#333; auto; } a.button:hover{ border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #999; border-bottom:1px solid #999; color:#333; } a.button span{ background:#d4d0c8 url(images/bg_btn.gif) repeat-x; float:left; line-px; px; padding:0 10px; border-right:1px solid #777; border-bottom:1px solid #777; } a.button:hover span{ border:none; border-top:1px solid #777; border-left:1px solid #777; background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x; cursor:pointer; }See this technique in action
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe
Comments (79 Comments)
Ivan
April 24, 2008
Steven Snell
April 25, 2008
Joao Oliveira
April 25, 2008
Rafael Masoni
April 25, 2008
DotNetYuppie
April 25, 2008
Majesticskull
April 25, 2008
nikola
April 25, 2008
Toni
April 25, 2008
b0li
April 25, 2008
Peter Gasston
April 25, 2008
david
April 25, 2008
Welcome to Paradise
April 25, 2008
Tiago Celestino
April 25, 2008
Beyond Random
April 25, 2008
Michael
April 26, 2008
Luis Henrique
April 27, 2008
Jakub Slaby
April 27, 2008
Binny V A
April 27, 2008
Reynder Bruyns
April 28, 2008
Erik
April 29, 2008
Aminur RAHMAN [aka Tom R]
April 29, 2008
zoel
April 29, 2008
Nout van Deijck - Blog <3.14 />
April 29, 2008
land surveyors united
May 1, 2008
Christopher Kata
May 1, 2008
Martin Sarsini
May 1, 2008
Matt
May 1, 2008
CT
May 3, 2008
Denver Web Design
May 4, 2008
Kurzy Pocasie Slovniky
May 8, 2008
SARAH
May 8, 2008
Dallas Web Designer
May 8, 2008
Vibhu Satpaul
May 9, 2008
Mark Wilmot
May 13, 2008
nice
May 13, 2008
Drew Aldrich
May 13, 2008
Nels
May 13, 2008
Fouad Masoud
May 15, 2008
Freelance Web Design
May 16, 2008
javier
May 19, 2008
Mr.Ro
May 20, 2008
Web Design Liverpool
May 27, 2008
Posicionamiento
May 27, 2008
evodesign
May 28, 2008
sidhu
May 28, 2008
James Socol
May 30, 2008
Media Surgery Design
June 3, 2008
Julesgems.com
June 12, 2008
Marco
June 16, 2008
Craig Farrall
June 20, 2008
Joe
June 22, 2008
crackafaza
June 26, 2008
mavirroco
June 30, 2008
Robert Augustin
July 8, 2008
Fernstudent
July 11, 2008
Firebubble Design
July 27, 2008
raffaeu
July 28, 2008
exposed acne review
July 30, 2008
Mihai Stancu
July 30, 2008
kim
August 6, 2008
sjl web design
August 11, 2008
boxing boi
August 11, 2008
Shannn
November 25, 2008
Daniel
December 24, 2008
ilac isimleri
January 14, 2009
Kupa Bardak
January 14, 2009