28 abril 2009 in XHTML/CSS by dacho

votar
Share

Muchas veces por cuestiones de diseño, optamos por colocar los titulos de las paginas webs con imagenes, por ejemplo si uno quiere añadir texto con sombra, con HTML simplemente no se puede lograr. Lo que se hace en este caso es Reeamplazar el texto por imagenes mediante CSS, es decir por ejemplo uno tiene el siguiente titulo:

Reemplazo de texto por imagenes mediante CSS

y se creo una imagen como esta:

titulo-texto-por-imagen-css

En este pequeño artículo veremos como colocar ese titulo sin perder relevancia en el posicionamiento.

Como sabemos los títulos o subtítulos de las paginas webs se maquetan con <h1><h2>…<h6>, utilizando un orden jerárquico, de estas etiquetas.

Es decir que por ejemplo utilizaremos una <h3> para nuestro titulo, el HTML del titulo seria simplemente

 
<h3>Reemplazo de texto por imágenes mediante CSS</h3>

Ahora lo que tenemos que lograr es poder reemplazar el texto por una imagen pero sin perder la relevancia que tiene el titulo, entonces se procede con codigo css de la siguiente manera:

 
h3{   background:url(imagen-que-reemplaza-texto.png) no-repeat;
        display:block;
        width:447px; /*Ancho de la imagen*/
        height:47px; /* alto de la imagen*/
        margin:0 0 0 0;
        overflow:hidden; /* esto hace que todo lo que queda afuera del tamaño indicado en width y height se oculte y no se vea */ 
        text-indent:-999%; /* Esto hace que el texto se mueva -999% del tamaño del h3 a la izquierda, de modo que no se ve */
      }

Te recomiendo que pruebes el código si no lo entendes y empieces a jugar con las propiedades a ver como se logran variaciones.

También se puede ver que si uno coloca una imagen de fondo y le quita el text-indent:-999%; queda la imagen de fondo con el texto encima de la imagen esto se utiliza mucho para el diseño web.

Con respecto a los beneficios de utilizar esta técnica en vez de insertar la imagen de forma común con la etiqueta <img/> destaco principalmente que las etiquetas de los encabezados se deben utilizar para los títulos porque esto marca una semántica en la web, pero por ejemplo si uno coloca todos los títulos con imágenes, aunque coloquen la correspondiente etiqueta alt dentro de la imagen, los motores de quizás no lo interpreten como un titulo, sino como una simple imagen.

También hay que tener en cuenta que las imágenes son mucho mas pesadas que el texto, por lo que hay que tener cuidado con utilizar esta técnica cuando se las utiliza muchas veces en una misma pagina y además de eso tener las imágenes optimizadas al máximo para que la pagina cargue de forma rápida.

Share
Si este post te sirvio/gusto, Entonces considera Enviar un comentario o Suscribirte a nuestro feedRSS para recibir las actualizaciones de nuesdtor sitio.

¿Que Podes seguir leyendo?