Texto auxiliar con estilo

18/abr/2007 4

Pido disculpas por un título tan simple esta vez. No se me ocurrió nada mejor. Enfin, lo que vale es lo que sigue.

Siguiendo con el desarrollo del nuevo Be Studios, creé un método donde al posar el mouse sobre una imagen, se desplegara un texto alternativo (no, no es alt) y que fuera auxiliar a la imagen. Esto lo había visto antes, sólo que no recuerdo ningún link en este momento. Entonces, recreé la situación, y la explico a continuación. Antes sí, vean el ejemplo para que sepan de qué hablo.

Primero el código HTML. En este caso, es sólo una imagen simple y silvestre. Ella está contenida dentro de un <div>, el cual me entrega más control sobre el manejo de profundidades a través de z-index. Mi texto alternativo se posa sobre un <span> luego después del <img>, el cual a través del CSS se verá dentro, y con un fondo y con transparencia.

<div id="ejemplo">
     <img src="img.gif" width="300" height="100" alt="CSSLab – Otro laboratorio de CSS, pero en espa&ntilde;ol" />
     <span>Click para abrir</span>
</div>

SafariFirefoxInternet Explorer 7OperaCaminoFlock

Pues ahora viene la magia:

#ejemplo {
     z-index: 0;
     width: 300px;
     height: 100px;
     position: relative;
}
#ejemplo img {
     z-index: 1;
}
#ejemplo span {
     display: none;
}
#ejemplo:hover span {
     display: block;
     position: absolute;
     right: 0;
     bottom: 0;
     z-index: 2;
     padding: 2px 5px;
     background: #000;
     color: white;
     font-weight: bolder;
     font-size: 24px;
     text-shadow: #000 1px 1px 3px;
     opacity: 0.4;
     -moz-opacity: 0.4;
}

Primero, definimos nuestro <div>, como dije con un z-index inferior para dejarlo abajo de nuestro <span> y posicionado relativamente. Esto es muy importante, ya que a continuación nuestro <span> estará posicionado absolutamente en relación al <div>, lo que lo colocará sobre la imagen (que según se muestra tiene z-index: 1, superior al <div> pero inferior al z-index: 2 del <span>) Este texto será desplegado con un :hover en el <div>, lo que no hace que funcione en IE6 (ya que este browser no soporta pseudo-classes que no sean links <a>,lo cual para este caso me importa bien poco). El resto, código para que se vea bonito.

Finalmente la transparencia a prueba de browsers. Si ven el código fuente en el ejemplo, verán que para IE7 está implementado con comentario condicional.

Comentarios

  1. DragonBol [#]

    Muy buen, lo pondré en práctica. Creo que deberíamos comenzar una campaña para hacer desaparecer a IE6

  2. fearlex [#]

    Muy buena, de veras, aunque hay una cosa que todavia me tiene un poco confundido, por que utilizas text-shadow, si no funciona ni en IE ni en Firefox, o si ??

    Esta super bueno tu tutorial.

    Gracias mil.

  3. luisDRK [#]

    verdaderamente muy bueno 😉

  4. CSSLab Admin [#]

    fearlex, utilizo safari, q es e unico browser hasta ahora q soporta text-shadow, y como max os x tiene una muy bueno aliasing en las tipografias, se ve excelente. siempre q puedo lo utilizo. pero es solo estetica.

Responder a luisDRK ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab