Creación de un Sprite con CSS

Publicado el en la categoría Diseño y Programación

Desde que conocemos Internet, los enlaces han sido parte importante de las páginas ya que nos permiten acceder a todo el contenido de la web “navegando” por sus diferentes páginas. Conocemos los distintos estados de un enlace (activo, visitado,…) y como mediante diseño podemos modificar su aspecto.

Hoy vamos a modificar estos estados mediante CSS y una imagen. Dicha imagen será realmente un Sprite, la cual visualizaremos cierta porción de imagen dependiendo del estado del enlace. La razón para utilizar esta técnica es la sencillez del código requerido y su compatibilidad con la gran mayoria de los navegadores, ya que utilizamos CSS2.

Lo primero será crear la imagen. Vamos a partir del logotipo de nuestra web hermana tecnoblogin.com para crear los cuatro estados del enlace.

sprite-tecnoblogin-estados

Ahora le toca el turno a la programación. En nuestro documento HTML, crearemos un enlace a la hoja de estilos y codificaremos el enlace. A continuación en el fichero CSS indicaremos el código para los cuatro estados del enlace:

Codigo HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Ejemplo de CSS Sprites</title>
<link rel="stylesheet" type="text/css" href="sprite.css" />    
</head>
<body>
    <p>Ejemplo de Sprite con CSS</p>   
    <a id="tb" href="http://www.tecnoblogin.com" target="_blank">Acceder
a tecnoblogin.com</a> 
</body>
</html>

Codigo CSS

      a#tb {
        display:block;
        width:150px;
        height:35px;
        text-indent:-9999px;
        background:url(sprite-tecnoblogin.jpg);
      }

      a#tb:link { background-position: top left; }      
      a#tb:hover { background-position: top right!important; }
      a#tb:active { background-position: bottom left!important; }
      a#tb:visited { background-position: bottom right; }

Pulsa para ver el ejemplo en funcionamiento

Facebooktwittergoogle_plus