Re: [css-d] Pure CSS fisheye menu with icons: a demo
Or, we can do it with just one image and a little bit of CSS3 magic: http://tjameswhite.com/demos/fisheye/ My demo uses Gabriele's original code, minus all the extra background images and heights. Instead, I've added CSS transition and transform to replicate the fisheye. Yes, this requires vendor prefixes. It should work in the latest versions of Mozilla, Webkit and Opera browsers. Sorry, no IE, and I didn't bother making a fall back for IE, which could be done easy enough. My only thought here would be if it is possible to use the larger (hovered) image size and reduce it for the off state. This would possibly crisp up the hovered images a bit - of course, as long as the reduced size looks good too. Just a thought for anyone considering this... -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
I like this. Hut shouldn't the expansion also work when the menu item is
selected by keyboard? I tried adding
#navigation li a:active {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
}
But it did not have the effect I expected. Why not?
Peter
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tim White
Sent: June-14-10 7:24 AM
To: Gabriele Romanato
Cc: css-discuss
Subject: Re: [css-d] Pure CSS fisheye menu with icons: a demo
Hi all!
I'm pretty inspired this time:
http://onwebdev.blogspot.com/2010/06/pure-css-fisheye-menu-with-icons.html
Gabriele
Or, we can do it with just one image and a little bit of CSS3 magic:
http://tjameswhite.com/demos/fisheye/
My demo uses Gabriele's original code, minus all the extra background
images and heights. Instead, I've added CSS transition and transform
to replicate the fisheye.
Yes, this requires vendor prefixes. It should work in the latest
versions of Mozilla, Webkit and Opera browsers. Sorry, no IE, and I
didn't bother making a fall back for IE, which could be done easy
enough.
Enjoy,
Tim
tjameswhite.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
I like this. Hut shouldn't the expansion also work when the menu item
is
selected by keyboard? I tried adding
#navigation li a:active {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
}
But it did not have the effect I expected. Why not?
Try :focus
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
Peter Coates wrote:
I like this. Hut shouldn't the expansion also work when the menu item is
selected by keyboard? I tried adding
#navigation li a:active {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
}
But it did not have the effect I expected. Why not?
Peter
?
#navigation li a:hover,
#navigation li a:active,
#navigation li a:focus {
color: red;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
}
Best,
~d
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
At 10:24 AM -0400 6/14/10, Tim White wrote: Hi all! I'm pretty inspired this time: http://onwebdev.blogspot.com/2010/06/pure-css-fisheye-menu-with-icons.html Gabriele Or, we can do it with just one image and a little bit of CSS3 magic: http://tjameswhite.com/demos/fisheye/ My demo uses Gabriele's original code, minus all the extra background images and heights. Instead, I've added CSS transition and transform to replicate the fisheye. Yes, this requires vendor prefixes. It should work in the latest versions of Mozilla, Webkit and Opera browsers. Sorry, no IE, and I didn't bother making a fall back for IE, which could be done easy enough. Enjoy, Tim tjameswhite.com While it's neat, but it's a misnomer. That's not a fisheye, it's just a magnification. A fisheye is like looking through a fisheye lens. Here's a fisheye picture for example: http://en.wikipedia.org/wiki/File:Fisheye_lens_room.jpg The perspective is distorted (i.e., no straight lines) Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
#navigation li a:hover,
#navigation li a:active,
#navigation li a:focus {
color: red;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
}
etc.
All this stuff is good to know and I'm glad for the discussion.
However, for the case at hand, it seems like an awful lot of
complicated, proprietary fuss merely in order to use background
images in the menu. May I ask, why not simply use foreground icon
images and change their height or width on hover? That would be
cross-browser-compatible for anything that can parse CSS. I don't see
that having the icon in the foreground is any more of an issue than,
say, having a foreground thumbnail image in a gallery be the link to
its larger counterpart. Isn't this a case where one could argue both
sides of the question, Is it content or is it presentation?
Curiously,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
On 16/06/2010, at 5:44 AM, tedd wrote: While it's neat, but it's a misnomer. That's not a fisheye, it's just a magnification. A fisheye is like looking through a fisheye lens. Here's a fisheye picture for example: http://en.wikipedia.org/wiki/File:Fisheye_lens_room.jpg The perspective is distorted (i.e., no straight lines) Cheers, tedd Hmmm, you're right but you can't blame him when the creators of the javascript versions are using the same terminology : http://safalra.com/web-design/javascript/mac-style-dock/ I messed with this style for ages a long time ago and never got the results I wanted unless I used flash so I gave up. I like this technique but can you get it to magnify from the centre point of the image outwards? Oh no I did use it on something - http://www.redrunner.co.uk/ After the first rollover the menu uses the effect i wanted on rollover (it warps of to the side slightly the first time). However what i really wanted was that they all stayed in the width of their containing div, expanded from the centre point outwards, and depending on how close you were to the centre, how much the image expanded. i saw it done by some real wizards, I asked how but they were too busy to tell me. Bar stewards. cb __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
Paul Novitski wrote:
#navigation li a:hover,
#navigation li a:active,
#navigation li a:focus {
color: red;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
}
etc.
Isn't this a case where one could argue both
sides of the question, Is it content or is it presentation?
Curiously,
Paul
I think it is known as the avant garde: also, known as, let's
lighten up and have some fun.
Best,
Lady Gaga
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
#navigation li a:hover,
#navigation li a:active,
#navigation li a:focus {
color: red;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
}
etc.
All this stuff is good to know and I'm glad for the discussion.
However, for the case at hand, it seems like an awful lot of
complicated, proprietary fuss merely in order to use background
images in the menu. May I ask, why not simply use foreground icon
images and change their height or width on hover? That would be
cross-browser-compatible for anything that can parse CSS. I don't see
that having the icon in the foreground is any more of an issue than,
say, having a foreground thumbnail image in a gallery be the link to
its larger counterpart. Isn't this a case where one could argue both
sides of the question, Is it content or is it presentation?
Hi Paul,
I'd like to answer this question with another question:
If you were using img elements rather than background images, what would
you be using as alt text?
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
On Tue, Jun 15, 2010 at 5:49 PM, Paul Novitski p...@juniperwebcraft.com wrote: All this stuff is good to know and I'm glad for the discussion. However, for the case at hand, it seems like an awful lot of complicated, proprietary fuss merely in order to use background images in the menu. The CSS isn't proprietary, merely vendor prefixes. It is, as someone else pointed out, avant-garde. The effect comes from the CSS3 and isn't finalized, hence the vendor prefixes. Once the spec is finalized, the prefixes can be removed. For example, we have been able to use -moz-border-radius and -webkit-border-radius for a couple of years now; my understanding is that the spec is 'complete' and the next version of browsers (including Opera and IE9) will all support the simpler border-radius. May I ask, why not simply use foreground icon images and change their height or width on hover? That would be cross-browser-compatible for anything that can parse CSS. This is cross-browser compatible. For browsers that do not support the transform, nothing happens but they still get the text and image. Of course, there could be other changes, such as color and image swapping, going on in addition to the transform that those browsers would implement. I don't see that having the icon in the foreground is any more of an issue than, say, having a foreground thumbnail image in a gallery be the link to its larger counterpart. Isn't this a case where one could argue both sides of the question, Is it content or is it presentation? Yes, this would fall into a semantic debate (see Thierry's reply). But for the CSS I used it doesn't matter if the image is foreground, background or not there. The transform effects the a element. Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
On 16/06/2010, at 5:44 AM, tedd wrote: While it's neat, but it's a misnomer. That's not a fisheye, it's just a magnification. Hmmm, you're right but you can't blame him Yes, I realize that, but as Chris points out, I didn't name it, Gabrielle (original post) did. And I suspect she got the name from somewhere else. I messed with this style for ages a long time ago and never got the results I wanted unless I used flash so I gave up. I like this technique but can you get it to magnify from the centre point of the image outwards? Yes, at least a bit. Look for the line 'tranform-origin' and alter the values (horz vert). My version has the zoom focused at the top center. You could easily change that to 50% 50% to zoom from the center of the box (it won't be the center of the image in this case). However what i really wanted was that they all stayed in the width of their containing div, expanded from the centre point outwards, and depending on how close you were to the centre, how much the image expanded. Hmm, I don't know about changing the amount of expansion based on proximity to center. I'm sure someone wiser than me could do something with JavaScript. Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
I like this. Hut shouldn't the expansion also work when the menu item is
selected by keyboard? I tried adding
#navigation li a:active {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
}
But it did not have the effect I expected. Why not?
I've updated my example with :focus and :active. I also tossed in an
Easter Egg...
For browsers that don't support the transform, I added some good old
color to the link text. Ideally I'd change the icon color as well, but
I'm not a graphics person.
Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
Hi Tim, May I ask, why not simply use foreground icon images and change their height or width on hover? That would be cross-browser-compatible for anything that can parse CSS. This is cross-browser compatible. For browsers that do not support the transform, nothing happens but they still get the text and image. Of course, there could be other changes, such as color and image swapping, going on in addition to the transform that those browsers would implement. This is progressive enhancement, but I'd not say it is cross browser compatible as it is not. Paul's solution *is* cross browser compatible as would deliver the same look and feel across most browsers out there. I don't see that having the icon in the foreground is any more of an issue than, say, having a foreground thumbnail image in a gallery be the link to its larger counterpart. Isn't this a case where one could argue both sides of the question, Is it content or is it presentation? Yes, this would fall into a semantic debate (see Thierry's reply). But for the CSS I used it doesn't matter if the image is foreground, background or not there. The transform effects the a element. The question I asked Paul is related to his use of the alt attribute, it was not meant to discuss semantics. The value used for alt text shows if the author considers the image as decorative or not. If Paul says he would use alt=, then it means he considers the image being decorative, if he says he would use some value (for example alt=home) then it means he considers that image being content. Imho, the img itself is not content, it is the alt text that makes it content. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
Hi all! I'm pretty inspired this time: http://onwebdev.blogspot.com/2010/06/pure-css-fisheye-menu-with-icons.html Gabriele Or, we can do it with just one image and a little bit of CSS3 magic: http://tjameswhite.com/demos/fisheye/ My demo uses Gabriele's original code, minus all the extra background images and heights. Instead, I've added CSS transition and transform to replicate the fisheye. Yes, this requires vendor prefixes. It should work in the latest versions of Mozilla, Webkit and Opera browsers. Sorry, no IE, and I didn't bother making a fall back for IE, which could be done easy enough. Enjoy, Tim tjameswhite.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
Cool! Very smooth. I like it. Could you please post a comment to my post with the link of your nice demo? thanks! ps. your demo is really much more future-friendly! fantastic! :-) Gabriele http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Pure CSS fisheye menu with icons: a demo
Hi all! I'm pretty inspired this time: http://onwebdev.blogspot.com/2010/06/pure-css-fisheye-menu-with-icons.html I didn't test it in IE before publishing it, though. Well, IE has its height: 100%, but I'm not sure that a#id:hover will work... thanks for your attention! bye :-) Gabriele http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
Gabriele Romanato wrote: Hi all! I'm pretty inspired this time: http://onwebdev.blogspot.com/2010/06/pure-css-fisheye-menu-with-icons.html I didn't test it in IE before publishing it, though. Well, IE has its height: 100%, but I'm not sure that a#id:hover will work... thanks for your attention! bye :-) Gabriele Neat! IE/6.0 standalone on Mac 10.4 gets it. Best, ~d aside Why the elliptical method to set type? -- desktop http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
At 12:00 PM +0200 6/13/10, Gabriele Romanato wrote: Hi all! I'm pretty inspired this time: http://onwebdev.blogspot.com/2010/06/pure-css-fisheye-menu-with-icons.html I didn't test it in IE before publishing it, though. Well, IE has its height: 100%, but I'm not sure that a#id:hover will work... thanks for your attention! bye :-) Gabriele Gabriele: Why not use image replacement? Granted they would be larger images, but that way you load and deal with only one image per menu item. Here's an example: http://webbytedd.com/bb/replace-image2/ Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
Claude Needham wrote: It is most helpful having a live demo of the effect. That is something I missed with the first post in this thread. It is so convenient having a live page. Claude Claude, there is a link Gabriele's live demo page. I think you just didn't see it... http://dev.css-zibaldone.com/demos/pure-css-fisheye-menu-icons/demo.html Best, ~d -- desktop http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
Claude, there is a link Gabriele's live demo page. I think you just didn't see it... http://dev.css-zibaldone.com/demos/pure-css-fisheye-menu-icons/demo.html Best, ~d sheepish grin Right you are. Sitting there in plain sight for all to see. Thanks for pointing the way to it. It is a nice effect. Reminds me of the first time I saw a Mac user interface. Claude __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
Hi Gabriele, I'm pretty inspired this time: http://onwebdev.blogspot.com/2010/06/pure-css-fisheye-menu-with- icons.html I didn't test it in IE before publishing it, though. Well, IE has its height: 100%, but I'm not sure that a#id:hover will work... thanks for your attention! bye :-) I'm not sure height:100% does anything, nor the 100% width on #navigation, nor display:block on the floats. Also, since you are already using padding on the anchors, why not using padding-top to make room for the larger image instead of line-height? The former would set a fixed value, but the latter may vary depending on font values. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
