[Tutorial] Logo accesible con reemplazo de imágenes Gilder/Levin
Publicado por badger (7 intervenciones) el 27/11/2016 11:07:27
Hola ,comparto con ustedes este tutorial para mostrar un logotipo de forma accesible usando la técnica de reemplazo de imágenes Gilder/Levin, que consiste en posicionar de forma absoluta un contenedor con una imagen de fondo sobre otro contenedor posicionado de forma relativa. Es el método recomendado para hacer HTML semántico, separando presentación de contenido, que es la razón de ser de CSS.
HTML:
CSS:
El tamaño se especifica en pixels para máxima compatibilidad con algunas versiones de Internet Explorer en las que falla height: 100%;
Usando esta técnica, en caso de que el CSS o las imágenes estén desactivadas, aparecerá el texto en lugar de la imagen.
Fuente: Muestra tu logo de forma accesible con el método Gilder-Levin
HTML:
1
2
3
<h1>
My Company<span></span>
</h1>
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
h1 {position:relative; /* allow span to be absolute positioned over h1 */
}h1 span { position:absolute; top:0; left:0;width:300px; /* logo width - REAL metric for IE */
height:200px; /* logo width - REAL metric for IE */
background-image:url(images/h1logo.png);
}El tamaño se especifica en pixels para máxima compatibilidad con algunas versiones de Internet Explorer en las que falla height: 100%;
Usando esta técnica, en caso de que el CSS o las imágenes estén desactivadas, aparecerá el texto en lugar de la imagen.
Fuente: Muestra tu logo de forma accesible con el método Gilder-Levin
Valora esta pregunta
2
