niedziela, 15 listopada 2009

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.

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.
blog comments powered by Disqus

Wszystko o designie, dużo inspiracji i tutoriali.

Copyright 2009 - 2012 Creatyna. All rights reserved.