Texto invisible usando CSS

Ocultar elementos de texto usando CSS puede ser útil para diversos propósitos de diseño. Un escenario común es reemplazar el texto con una imagen como logotipo. Este artículo aborda un problema específico: cómo eliminar eficazmente el texto original mientras se muestra la imagen.

Soluciones para ocultar texto

Existen múltiples enfoques para hacer que el texto sea invisible mientras preservar las dimensiones del elemento para la colocación de la imagen.

Método 1: sangría de texto

Una técnica consiste en empujar el texto fuera de la pantalla usando sangría de texto:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;
    white-space: nowrap;            /* because only the first line is indented */
}

Método 2: Ocultar texto

Otra solución evita el gran cuadro invisible creado por la sangría negativa:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Ambos métodos logran el resultado deseado ya sea empujando el texto fuera de la pantalla u ocultándolo dentro del elemento.