Blog Borchani Studios

Al hacer rollovers en Css con imágenes, dos, tres, o más imágenes deben ser cargadas. Por lo tanto tenemos una imagen para cada estado (normal, al poner el Mouse sobre el, y al visitarlo). Al poner todos los estados en una imagen realizamos los cambios dinámicos más rápidos y no requiere mas de una carga. Generalmente para el rollovers con CSS, lo haríamos utilizamos 3 imágenes de fondo diferente para cada estado y lo hariamos mediante CSS de esta forma.

CSS:

#menu a {
…
background: url(“button.gif”) top left no-repeat;
}
#menu a:hover {
…
background-image: url(“button-over.gif”);
}
#menu a:active {
…
background-image: url(“button-active.gif”);
} 

/* etc… */

Pero también existe una manera fácil de evitar utilizar una imagen de fondo para cada estado que es utilizando una misma imagen que contendrá todas las instancias necesarias. Lo bueno que esta imagen se cargara solo una vez y se desplazara lo necesario para cada diferente estado, por ejemplo que al pasar el Mouse por encima el fondo se mueva 157px a la izquierda y al hacer click sobre ella se mueva unos 314px.

Para ello nuestro CSS seria el siguiente:

CSS:

#menu a {
display:block;
width:120px;
margin: 1em 0; padding:7px 0 10px 20px;
font: bold 14px/1 sans-serif;
color:#569BE3;
background: url(“link.jpg”) 0 0 no-repeat;
text-decoration: none;
}
#menu a:hover {
background-position: -157px 0;
color: #ED5446;
}
#menu a:active {
background-position: -314px 0;
color:#000;
}

Imagen:

Un buen tutorial creado por InfectedFX pasó por paso sobre todo lo que necesitas saber sobre el posicionamiento de fondo (background-position) una propiedad de CSS que te permitirá poner diferentes imágenes a los enlaces haciendo uso de la etiqueta a y sus atributos.
Ver Tutorial

Menu Square es un menú bastante sencillo, pero que a la vez dentro de su sencillez tiene su estilo. Css utilizado en el Menu

CSS:

#shortcuts, #navigation {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-transform: lowercase;
} 

#shortcuts li, #navigation li {
    float: left;
}

#shortcuts li {
    padding-left: 1em;
}

#shortcuts a {
    font-size: 0.8em;
    color: #999;
    background: #333;
    text-decoration: none;
}

#navigation {
    padding-top: 43px;
    clear: right;
    letter-spacing: 1px;
}

#navigation li {
    height: 100px;
    line-height: 90px;
    width: 120px;
    text-align: center;
}

#navigation a {
    display: block;
    height: 100px;
    line-height: 90px;
    width: 120px;
    color: #fff;
    background-image:  url(images/navigation-2.jpg);
    background-repeat: no-repeat;
    background-position: -120px 0;
}

#navigation a:hover, #navigation a#current {
    font-size: 110%;
    background-position: 0 0;
}

#navigation a span {
    background: #525252;
    color: #fff;
}

Html

<ul id=”navigation”>

 

<li><a href=”http://www.borchani.com/” title=”borchani”><span>Home</span></a></li>
<li><a href=”http://www.borchani.com/Galeria/index.html” title=”Galeria”><span>Galeria</span></a></li>
<li><a href=”http://www.borchani.com/index.php/acerca-de/” title=”Acerca de”><span>Acerca de</span></a></li>
<li><a href=”http://www.borchani.com/index.php/contacto/” title=”contacto”><span>contacto</span></a></li>
        </ul