Ocultar texto con CSS

mayo 12, 2014

Este truco es muy útil para, por ejemplo, utilizarlo en el logotipo de una empresa. Lo usual es que sea una imagen, pero también es muy conveniente poner el nombre de la empresa dentro de un h1 por razones de SEO. Esta es la mejor manera de hacerlo.

Para ello se utiliza la propiedad CSS «text-indent»

La propiedad text-indent indica la tabulación o indentación que se aplica a la primera línea de texto de un elemento. El tamaño de la tabulación se puede indicar con cualquiera de las unidades de medida definidas por CSS y puede ser positivo o negativo, Por ejemplo:

text-indent: 0;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.

text-indent: 30px;

Lo que básicamente se hace es ocultar el texto lejos de la pantalla, y luego aplicar una imagen de fondo.

h1 {
	text-indent:-9999px;
	width:400px;
	height:100px;
	background:transparent url("images/logo.jpg") no-repeat scroll;
}