Niquelao

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

Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También puedes enviar un trackback desde tu sitio.

• Artículo anterior: Si utilizas Safari o Chrome…
• Artículo siguiente: Más sobre CSS 3: background-origin y background-clip