Blog and Web

Muchas veces tenemos la necesidad de remplazar texto con imágenes pero sin tener la posibilidad de hacerlo directamente o porque no nos resulta conveniente, caso frecuente en los sistemas de gestión de contenido (CMS) y en los logos.

En este artículo de mostraremos algunas técnicas para remplazar el texto con imágenes mediante CSS.

1. Remplazo mediante una identación alta.

La base de esta técnica es esconder el texto dando una identación muy alta, de modo que el texto tenga que salir de la pantalla y se dimensiona la etiqueta al tamaño de la imagen y esta se declara como fondo.

Veamos un ejemplo, común en los encabezados de un sitio.

Código XHTML:

<h1 id='logo'>Título de la página</h1>

Código CSS para hacer el remplazo:

#logo {
/* dimensiones de la imagen */
widht: 150px;
height:100px;
/* identar el texto */
text-indent:-9000px;
/*mostrar la imagen*/
background:url(logo.gif) no-repeat 0 0;
}

Las desventajas de este método son que los usuarios con imágenes deshabilitadas en el navegador, no verán ni el texto original ni la imagen. Otra desventaja es que no es posible poner un link a la imagen.

2. Remplazo mediante un renglón altoAl igual que la técnica anterior se busca esconder el texto sacándolo de la pantalla, pero la forma de hacerlo en esta es dando un tamaño exagerado al renglón, el texto en su posición por defecto es mandado al fondo y por tanto ya no es visible.Veamos un ejemplo:Código XHTML:

   <h1 id='logo'>Título de la página</h1>

   Código CSS para hacer el remplazo:

   #logo {
   /* dimensiones de la imagen */
   widht: 150px;
   height:100px;
   /*agrandando el renglón*/
   line-height: 1000px;
   /*escondiendo el renglón*/
   overflow: hidden;
   display: block;
   /*mostrar la imagen*/
   background:url(logo.gif) no-repeat 0 0;
   }

3. Remplazo por superposiciónEsta técnica se basa en la superposición de capas de CSS y no oculta el texto, sino que le coloca una capa encima con la imagen de fondo.Veamos un ejemplo:Código XHTML:

   #logo {
   /* Dimensionar capa */
   position:relative;
   widht: 150px;
   height:100px;
   /* Evitar se agrande la capa */
   overflow:hidden;
   }
   
   #logo span {
   /* Encimar capa */
   z-index:1;
   display:block;
   position:absolute;
   left:0;
   top:0;
   /* Dimensiones de la imagen */
   widht: 150px;
   height:100px;
   background:url(logo.gif) no-repeat 0 0;
   }

   Esta técnica tiene la ventaja de mostrar el texto original cuando el usuario tiene desabilitadas las imágenes y la desventaja de que puede tener problemas en versiones antiguas de IE.

Puedes encontrar más en Diseñorama