HTML efekat senke na tekstu

Rešenje za sve internet browsere (pregledače?)

Postoje mnogi tutorijali koji koriste apsolutno pozicioniranje i javaskripe da bi prikazali efekat senke na tekstu. Ovo je jednostavnije i lepše rešenje koje radi u Internet Exploreru 5.5+, i aktuelnim verzijama Firefox, Safari, Opera, Chrome i sličnim programima.

Ovo je običan tekst sa jednostavnim efektom senčenja koji generiše vaš trenutni browser:

Ćevapčići su najbolji sa lukom!

Nemojte ih jesti svaki dan, ostavite mesto za Eurokrem, palačinke, raviole, kajmak i pivo.

Ovde se nalazi slika toga kako bi trebao da izgleda gornji tekst sa efektom senčenja:

Objašnjenje:

Svi browseri (osim Internet Explorera) koriste jednostavan efekat, definisan CSS komandom:
text-shadow: #333 2px 2px 3px;
#333 određuje boju senke, druga vrednost je relativna udaljenost senke od teksta po X osi, treća je to isto po Y osi i četvrta vrednost od 3px je 'blurovanost' senke.

Naš 'ljubljeni' Microsoft je još davno izmislio svoj sopstveni set standarda za tekstualne efekte u HTML-u, što nije opšte poznato. Ovaj efekat sam testirao u verzijama Internet Explorera 6, 7 i 8, a trebao bi da bude kompatibilan i sa ranijim verzijama, sve do 4.0. Možete kombinovati ovaj efekat sa p, i h1 - h5 tagovima. On iz nekog razloga neće raditi sa span tagom u Internet Exploreru 8. CSS kod:
FILTER: Shadow(Color=#444444, Direction=135, strength = 3);
width:550px;
height:30px;
font-size:22px;
Ovaj efekat je drugačije generisan, zato ne oćekujte potpuno isti rezultat u ostalim browserima. Primetićete da je boja senke drugačija, pošto IE generalno renderuje jače senčenje. "Direction" određuje ugao u stepenima u kome se prostire senka (0-360 u smeru kazaljke), a "strenght" određuje domet senke od teksta. Da bi efekat radio, visina i širina teksta moraju biti definisani zajedno sa efektom, zato obavezno uključite prostor za senčenje uz tekst. Veličina fonta takođe mora biti određena uz filter.

Kombinovanjem ove dve metode, dobijate rešenje za dodavanje senke bilo kom tekstu, u svim browserima. Evo kompletnog koda za tekstualni primer sa početka ovog tutorijala: <p style="
text-shadow: #333 2px 2px 3px;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
FILTER: Shadow(Color=#444444, Direction=135, strength = 3);
width:550px;
height:30px;
font-size:22px;">
Ćevapčići su najbolji sa lukom!
</p>

Možete naći i druge primere filtera na ovoj stranici. Rade jedino u Internet Exploreru, ali možda im ipak nađete primenu.

■ internet ■ tutorijali0 komentara

Molimo, popunite sledeća polja:

Vaše ime:

E-mail adresa:

Poruka:

Tagovi:

Prikaži sve (58)

■ 2D (1)
■ 3D (25)
■ arhitektura (13)
■ dizajn (13)
■ društvo (7)
■ fotografija (4)
■ hedonizam (1)
■ internet (16)
■ IT (4)
■ knjige (4)
■ konkurs (5)
■ kultura (9)
■ mape (2)
■ multimedija (7)
■ muzika (4)
■ nauka (3)
■ novinarstvo (4)
■ posao (8)
■ priroda (4)
■ sport (3)
■ tehnologija (2)
■ tutorijali (1)
■ umetnost (9)

Srpski | English

RSS feed