CSS3 i senke na tekstu (text shadow)
Kako smo pravili senke pre pojave CSS3
Gde ima svetlosti tu su i senke, tako je svuda u našem okruženju, pa zašto ne bi bilo i na web sajtovima. Senke stvaraju utisak dubine, odnosno stvaraju privid trodimenzionalnosti. Ali to je prirodnije za naše oko koje je naviklo da sve objekte u okruženju vidi sa manjim ili većim senkama.
Do pojave CSS3 senke na tekstu nije bilo moguće izvesti.
Neka imitacija senke na tekstu mogla se postići apsolutnim pozicioniranjem nekog teksta kao "glavnog", a potom ispisivanjem tog istog teksta samo pomerenog za par piksela u odnosu na "glavni tekst". Ovo jeste davalo utisak senke, ali ne baš prirodne, jer prirodna senka nema oštre ivice, već je zbog fizičke osobine svetlosti uvek malo zamućena.
Uvođenjem CSS3 pravljenje senki postalo je veoma jednostavno, brže za realizaciju i nesumnjivo brže za učitavanje.
Senke na tekstu - text shadow
Senka teksta može se definisati kao posebna klasa ili kao deo većine tagova koji se odnosi na tekst. Mogu se definisati vrednosti koje označavaju razmak senke od teksta po horinzoltali, razmak po vertikali, vrednost blur-a (zamućenja) i boja senke. Tekst može imate i više od jedne senke na taj način što se definicije odvajaju zarezom.
Sintaksa:
.senka { text-shadow:2px 2px 3px #ff0000; }
Ovde je senka naziv klase, prvi broj je udaljenost senke po horizontali, drugi broj je udaljenost senke po vertikali, treći broj je veličina blur-a (zamućenja) i na kraju je heksadecimalni broj koji definiše boju senke.
Definicije udaljenosti senke od teksta (prve dve cifre) su obavezne, dok se definicije blur-a i boje mogu izostaviti.
Važno je znati:
- Definicije udaljenosti senke od teksta mogu biti pozitivni i negativni brojevi, čime se određuje smer udaljenosti.
- Prva cifra pomera senku za određeni broj piksela po x osi (po horizontali). Ako je pozitivna pomeranje je u desno, a ako je negativna u levo.
- Druga cifra pomera senku za određeni broj piksela po y osi (po vertikali). Ako je pozitivna pomeranje je na dole, a ako je negativna na gore.
- Ukoliko izostavimo definiciju boje, senka će biti iste boje kao i tekst. Boje se mogu definisati i na druge načine, ali preporuka je da to ipak radite pomoću heksadecimalnog broja, kako je to i u donjim primerima urađeno.
- Ukoliko izostavimo definiciju blur-a, podrazumevana vrednost je 0, odnosno nema zamućenja senke.
- Ukoliko za neku vrednost želimo da bude 0px, možemo izostaviti i meru (u našem slučaju to je px).
Primeri senke na tekstu - text shadow
U donjem HTML editoru u levom, plavom bloku prikazan je HTML kod i CSS za primere u desnom, belom bloku. HTML i CSS kod u lefom bloku možete po svojoj volji menjati, a rezultat ćete odmah videti u desnom bloku.
CSS i HTML Rezultat
Komentari
Trenutno nema komentara.Dodajte komentar