Thursday, February 9th, 2006
CSS Navigation Magnification
Paul Armstrong put together an example of CSS navigation magnification, which brings the fishbowl effect to links.
I am not sure if these techniques help UI, but the CSS implementation is interesting.
CSS:
-
-
li { font-size: 1em; }
-
li:hover { font-size: 2.5em; }
-
li:hover + li { font-size: 2em; }
-
li:hover + li + li { font-size: 1.5em; }
-
This magic even works on IE!! Well, IE 7 ;)
3.7 rating from 82 votes
Yay for creative selector usage!
Boo for annoying web tricks…
That strikes me as an example of taking technologies used in making things accessible and using them to make navigation more difficult. Try to imagine having a mobility-restrictive disability and having your links resize and move around. Or ADD and having your navigation distract you from the reason you wanted to use a link.
IE/Win does not support the “+” CSS Selector (nor the hover-state of LI elements). If it could, nav menus would be easy:
HTML:
<ul class=”nav”>
<li>
<a href=”#”>Link 1</a>
<ul>
<li>Text 1.1</li>
<li>Text 1.2</li>
</ul>
</li>
</ul>
CSS:
ul.nav > li > a + ul{display:none}
ul.nav > li > a:hover + ul{display:block}
[...] CSS Navigation Magnification: [...]
Well, usable or not that is a handy bit of CSS, thanks for bringing it to my attention.
Also I thought instead of changing the font-size you could go for changing the colour or another attribute such as background-image.
Just a pity you can’t go “li:hover - li - li {” for preceding elements.
Not to be rude, or overly intrusive but isn’t this post a few years behind the times (as far as ‘discovering’ CSS techniques) and generally lacking in Ajaxian goodness to be worth posting up here?
I have to say that was a pretty useless tipp, sorry! If the user has problems with text being to small, he can simply press ctrl + to magnify the text. Hopefully the website is developed so the website looks good with bigger fonts…
Cool thing!
@Matthew:
IE7B2 does.. I stumble daily on things, crappy IE6 doesn’t. I have to develop for IE5+ so I can sing a sad song… Let’s hope IE7 will penetrate the browsing world fast and free uns developers of writing code for anything older.
Look, everyone is right that this is useless and frankly pretty irritating. But I think everyone is missing the point: It’s freakin’ brilliant! I mean, seriously, it’s such an elegant solution to a difficult, if purely academic, problem. So lay off, homies, this guy earned his street cred.
[...] Una curiosa forma de implementar CSS para mejorar la navegación. En realidad no está muy claro que la mejore, habrá que verla en acción, pero así de entrada tiene una pinta interesante. Archivado en dnx [...]
1999:
Ted Nelson had described this and similar techniques (”billowing and undulating text”) in relation to his Xanadu project.
http://xanadu.com/zigzag/fw99/billowing.html
2003: CSS Fisheye by Danny Ayers
http://dannyayers.com/2003/10/fisheye.html
Anyway I would love to see something as nice as this java example from Human-Computer Interaction Lab of University of Maryland:
http://www.cs.umd.edu/hcil/fisheyemenu/fisheyemenu-demo.shtml
I have to agree with Shawn, having things balloon up that much would be a killer for a person with a mobility disability, like me. But then again I understand how sites are structured, so I can click in the general area, and use tab. But then again I also can use Firefox’s live find and navigate that way.
Currently, I have not yet enough idea for using this method for usable applications.
But, it’s very cooooool.
P.S. I made same method for Japanese characters (UTF-8) and it correctly works.
[...] Ajaxian » CSS Navigation Magnification A CSS Trick to make text larger (tags: CSS) [...]
Cool effect. Totally lame.
http://www.cssplay.co.uk/menus/magnifier_text.html
Panerai Blackseal PAM 183
On the PAM-183, or Blackseal, the counterfeiters found a model devoid of these features, and therefore easier to copy. The case design on the PAM-183 is clean and simple. Unlike the rest of the historic line, the Radiomirs have a screw-down crown with no crown guard. Also, it utilizes a pillow-shaped case instead of the standard Historic-modeled case of models such as the PAM-111.
There seems to be only one core maker of counterfeit Blackseals, as there seems to be only one variation. This watch is VERY accurate from the front, in comparison to the genuine model. In the watch profile that came along with this video you’ll see comparison photographs of a genuine Blackseal next to a counterfeit example. From the front they are nearly identical, differing really only in the band color. The counterfeit Blackseal also seems to have a slightly longer crown stem, resulting in the crown being a fraction of an inch farther from the case.
The dial on the Blackseal is actually a sandwich design. It has a black dial with the hour markers and numbers cut out to reveal a second, luminescent layer beneath. This counterfeit exhibits the same dial design, but has slightly less bright illumination when viewed in the dark. This is common to replica watches in general; they tend to have a weaker glow to their luminous elements than their genuine counterparts.
Fancy Dress Costumes Sports Watches Timex Watches Certified PreOwned Watches Gerd Weithase Boat & Marina Apparel Omega Longines TAG Heuer Rolex Certified Used Rolex Watch Bras and Lingerie Online Rolex Replica Casio Watches Skagen
Replica BookThe Replica Watch Report reviews over 30 watches with detailed analysis and over 500 color photographs. Watches reviewed include the Rolex Submariner, Rolex Sea-Dweller, Rolex Daytona, Rolex Explorer, Rolex GMT Master II, Day-Date, Panerai PAM-111, Omega Seamaster, and many more! Get your copy today!
Please check out our website:
fashionhause There are top quality of replica handbags for sell
with perfect weight, feel, and like the originals.or email us : fashionhause@yahoo.com