Nueve técnicas de sustitución de imágenes con CSS
1 COMENTARIO - Publicado hace 1 mes - Clasificado en: CSS, TIPSLa 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:
- Crear cajas de mensajes con CSS y jQuery
- Distinguir Google Chrome y Safari con CSS
- Los pseudo-elementos :before y :after
- Cambiar el aspecto del cursor
- Realizar destacados con CSS
- CSS Poligonal para crear tooltips con punteros
- Usar PHP para comprimir ficheros CSS
También te puede interesar:
| Cómo crear un icono de configuración con formas simples | MooScroll | Crear un icono de una Sony Playstation en Photoshop | 100 ejemplos extraordinarios de papiroflexia | Las bases de datos Oracle pueden ser hackeadas remotamente |
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. |





















diseño web valencia en 500 iconos gratuitos para tus aplicaciones web



