Historial de un navegante

by Angel

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

leave a comment »

Leído en intenta,

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:

texto planocopiar

  1. <h1 id="logo">
  2. <span>Intenta
  3. </h1>
<h1 id="logo">
 <span>Intenta
</h1>

y el css:

texto planocopiar

  1. h1#logo {
  2. width: 250px;
  3. height: 25px;
  4. background-image: url(logo.gif);
  5. }
  6. h1#logo span {
  7. display: none;
  8. }
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.

Enlaces | Nine Techniques for CSS Image Replacement | intenta

Anuncios

Written by Angel Flores

7 febrero 2010 a 12:24

Publicado en General

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: