Stillərin kaskadlı cədvəlləri
CSS məsləhətlər & üsullar

Bu sənəd məqalənin tərcüməsidir "Web Style Sheets CSS tips & tricks".
Sənədin original versiyası mövcüddür yalnız W3C saytında http://www.w3.org/Style/Examples/007/text-shadow.html
Bü tərcümə rəsmi W3C sənəddi DEYIL.
Bütün Müəllif Hüqüqları W3C Malikdir.
Bu sənəddə tərcümə tərcümə səhvləri və mətbəə xətaları ola bilər.

Müəllif: Sabir Sabutai (bütün tərcümələr müəllifindir)
Lokal versiya: http://www.carionltd.com/Style/Example007/text-shadows.html

Mətnin kölgələri

CSS-in dərəcə 3   belə 'text-shadow' xüsusiyyəti var, istınilən mətnin hər hərfinə kölgə əlavə etmək üçün. Bunun ən sadə formasu belədir:

h3 {text-shadow: 0.1em 0.1em #333}

normal mətnə görə bir az sağa (0.1em) və aşağıya (0.1em)tünd boz kölgə əlavə edir. Nəticə belə alınır:

(2005 avqustunda hələ bütün brauzerlər 'text-shadow' dəstəkləmirlər. Yuxarıda göstərilən misal ən azı Safari və Konqueror ilə işləməlidir.)

Mətnin yuyulmuş kölgələri

'text-shadow' xüsusiyyətinin ən sadə formasının iki hissəsi var: rəng (#333 və yuxarı) və boşluq (yuxarıda göstərilən misalda 0.1em 0.1em). Bu görünən boşluqda kəskin kölgə yaradır. Lakin boşlüq da yuyulmuş ola bilər və bu isə yuyulmuş kölgənin səbəbi ola bilər.

Yuyulma dərəcəsi digər boşluq kimi təqdim olunub. İki xətt, birinin yuylma dərəcəsi azdır (0.05em), ikincisinin isə çoxdur (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

Oxunan ağ mətn

Qabaq və arxa lay arasında kontrast çox olmasa onu oxunana çevirmək olar. Bu açıq mavi fonda ağ mətnin nümunəsidir, əvvəl kölgəsiz, sonra isə kölgə ilə:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Çoxlaylı kölgələr

Siz də birdən çox kölgələr yarada bilərsiniz. Ümumiyyətlə bu bir az qəribə görsənir:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

Lakin, iki düzgün yerləşdirilmış tünd və açıq kölgələr sayəsində efekt faydalı olacaq:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

Bu bir az təhlükəlidir, çünki brauzeriniz 'text-shadow' alətini dəstəkləyib-dəstəkləməməsini tıyin edə bilərsiniz. Faktiki olaraq, bu misalda fon və mətnin rəngi eynidir (#CCCCCC və #D1D1D1), və kölgəsiz heç bir kontrast olmazdı.

Hərf və konturların çəkilməsi

Əvvəlki versiyanın iki kölgəli misalını ardıcıl olaraq istifadə etmək olar. Dörd kölgəyə görə hərflərə kontur vermək olar:

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Bu ən gözəl kontur deyil, və indi (avqust 2005) müzakirələr davam etdirilir ki, CSS-in daha yaxşı konturları yaratmaq üçün ayrı aləti (və yaxud, 'text-decoration' üçün dəyişən) olmalıdır yoxsa yox.

Neon işıqlanması

Yuyulmuş kölgəni birbaşa mətnin altında yerləşdirirsizsə, yəni boşluqsuz, efekt ondan ibarət olur ki, hərflərin ətrafında işıglanma yaradılsın. Bir kölgənin işıqlanması kifayət qədər intensiv olmursa, həmin kölgəni bir neçə dəfə təkrarən qoyun:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}