Fish eye menu only with CSS Transform and Transition 11 de Diciembre de 2009, por Rumoroso
This fish eye menu is a simple example of the things we can make with two special CSS 3 properties: transition (today only supported by Safari and Chrome with -webkit-transition) and transform (supported by Safari and Chrome with -webkit-transform and by Firefox with -moz-transform).
First of all, the demo page of fish eye menu (remember that only works in Chrome, Safari and Firefox. FF has not transtion property support).
The HTML code:
<ul>
<li><a href="#"><img src="icons/opera_100.png" alt="opera browser" width="50"/></a></li>
<li><a href="#"><img src="icons/camino_100.png" alt="camino" width="50"/></a></li>
<li><a href="#"><img src="icons/chrome_100.png" alt="chrome" width="50"/></a></li>
.
.
.
</ul>
And the CSS code (the top fish eye menu in the example). At the first, the style to display all items inline with a bit of css:
ul,li {
margin: 0;
padding: 0;
}
ul {
text-align: center;
}
li {
display: inline;
}
And now, the transform and transition properties to obtain the effect:
a:hover, a:focus {
z-index: 200;
/* bring to top when the mouse is over or
when it has the focus (for keyboard navigation) */
}
a img {
border: none;
-webkit-transition: all .2s;
/* in Safari, every animatable property
triggers an animation in .2s */
-webkit-transform-origin: top;
/* in Safari, the origin for
transformation */
-moz-transform-origin: top;
/* in Firefox, the origin for
transformation */
}
a:hover img, a:focus img {
-webkit-transform: scale(2);
-moz-transform: scale(2);
/* transform property (for Safari and Firefox) */
}
The following article will come… soon…
Fish eye menu only with CSS Transform and Transition
Categoría: CSS

3 comentarios
-
Tweets that mention Niquelao » Archivo del weblog » Fish eye menu only with css transform and transition -- Topsy.com 11 de Diciembre de 2009 [...] This post was mentioned on Twitter. Jorge Rumoroso said: Fish eye menu only with css transform and transition properties http://bit.ly/6MUVP5 #CSS #niquelao [...]
-
Twitted by HaidaPrincess 12 de Diciembre de 2009 [...] This post was Twitted by HaidaPrincess [...]
-
uberVU - social comments 11 de Febrero de 2010 Social comments and analytics for this post…
This post was mentioned on Twitter by rumoroso: Fish eye menu only with css transform and transition properties http://bit.ly/6MUVP5 #CSS #niquelao…
Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También puedes enviar un trackback desde tu sitio.
