Nueve técnicas de sustitución de imágenes con CSS

1 COMENTARIO -  Publicado hace 1 mes -  Clasificado en: ,

La sustitución de imágenes mediante CSS es, a grandes rasgos, una técnica de sustitución de un elemento de terxto de una pagina por una imagen. Quizá uno de los ejemplos más clarificadores sería a la hora de incluir el logo en una web. Es posible que desees utilizar una etiqueta <h1> y texto por accesibilidad y los beneficios en cuanto a SEO, pero a la vez, y por razones estéticas, te gustaría mostrar tu logo y no el texto.

Un ejemplo:

<h1 id="logo">
	<span>Intenta
</h1>

y el css:

h1#logo {
        width: 250px;
        height: 25px;
        background-image: url(logo.gif);
}
h1#logo span {
        display: none;
}

En CSS-Tricks puedes encontrar el análisis de nueve de estas técnicas, cómo se realizan y las ventajas y desventajas de cada una.

Nine Techniques for CSS Image Replacement » »

Algunas entradas relacionadas:

También te puede interesar:

COMENTARIOS

Publicado hace 1 mes
más que HTML -   http://masquehtml.com

A mi parecer, la mejor técnica es la número 8. Aunque requiere de un span adicional, y no se puede usar con imágenes transparentes, es la más "accesible" con css y/o imágenes desactivadas.
Haz un comentario

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados respecto al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados. Todos los comentarios serán moderados antes de su publicación por lo que su aparición en la web puede verse aplazada un cierto tiempo. Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com