Szybki szpil #4 - Ukrywanie tekstu z text-indent

Dziś zajmiemy się ukrywaniem tekstu, zamiast niego wyświetlany będzie obrazek, może to być cokolwiek: tekst ze specjalnym fontem czy jakiś obrazek.

h1 {
text-indent:-9999px;/*Ukryty tekst*/
width:600px;
margin:0 auto;
background:transparent url("images/heading.jpg") no-repeat scroll;
}

Do ukrycia tekstu użyliśmy text-indent czyli selektor wcięcia tekstu. Oznacza to, że tekst który powinniśmy widzieć jest "wcięty" czyli przesunięty w lewo (bo znak minus) o 9999px, zamiast tego mamy wyświetlane tło, jak wskazuje kod CSS.

Subskrybuj lub podziel się

Będzie miło jeśli zasubskrybujesz bloga, bądź podzielisz się tym artykułem.

Autor: Marcin Piszczek

Interesuję się designem, internetem i nowinkami technicznymi. Z zamiłowania jestem web developerem i web designerem,a od jakiegoś czasu również blogerem. W wolnych chwilach gram w DotA. Kibicuję Zagłębiu.

Masz jakieś sugestie? Napisz do mnie. Możesz mnie również obserwować na Twitterze.