HTML - [Tutorial] Logo accesible con reemplazo de imágenes Gilder/Levin

 
Vista:
Imágen de perfil de badger

[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:
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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
2
Responder
Imágen de perfil de xve
Val: 1.050
Oro
Ha disminuido 1 puesto en HTML (en relación al último mes)
Gráfica de HTML

[Tutorial] Logo accesible con reemplazo de imágenes Gilder/Levin

Publicado por xve (1541 intervenciones) el 27/11/2016 14:47:59
Gracias por compartirlo Badger!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar