Aby uzyskać efekt zbliżony do cienia, należy zastosować warstwy (można jeszcze użyć filtrów graficznych aby efekt był bardziej naturalny). Trzeba je ulokować prawie w tym samym miejscu, tylko jedną z nich przesunąć o kilka pikseli.
Ta leżąca „pod spodem” może być np. czarna (jak cień).
Uzyskamy wtedy efekt podobny do tego z przykładu. Zobacz przykład: Oto kod źródłowy tego przykładu:
| <html> <head> <title>Tworzymy cieniowany tekst!</title> </head> <body> <div style=”position:absolute; top:100px; left:200px; color:black; font-family:verdana,arial,tahoma; font-size:40px;”> <b>WEBINSIDE.PL</b> </div> <div style=”position:absolute; top:103px; left:203px; color:red; font-family:verdana,arial,tahoma; font-size:40px;”> <b>WEBINSIDE.PL</b> </div> </body> </html> |
Proszę zwrócić uwagę, że skorzystaliśmy tutaj tylko ze stylu lokalnego. Nie było potrzeby definiowania własności bloku div w nagłówku strony. Właściwość position w bloku div oznacza pozycję warstwy na ekranie (div bywa nazywany blokiem, a także warstwą): position: absolute; oznacza, że warstwa jest w pozycji absolutnej, oddalona o x pikseli/cali/punktów itp. od góry strony (top:100px) oraz od lewej strony (left:300px). Druga z warstw została ustawiona w pozycji absolutnej 103piksele o góry i 303 od lewej strony, dzięki czemu dwa nałożone na siebie teksty i w minimalnie innej pozycji wyglądają jak cień.
Takie coś doskonale nadaje się np. do robienia nagłówków na każdej podstronie naszej witryny… Jeżeli napisalibyśmy position:relative; to oznaczałoby to pozycję relatywną tzn. oddaloną o x pikseli z lewej strony i u góry od poprzedniego elementu na stronie. Myślę, że nie trzeba już nic więcej wyjaśniać, bowiem uzyskać efekt cienia jest po prostu… łatwo!
