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

(Bu səhifə CSS stillərin kaskadlı cədvəllərini istifadə edir)

Mətnin kölgələri

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

Oxunan ağ mətn

Çoxlaylı kölgələr

Konturlar

Neon işıqlanması

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:

The noak and the barcicle

(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}

“What do you say?” said the UK

In order to see more clearly

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}

Kölgəsiz:

What is in it for me?

Kölgəli:

With a shovel and some oranges

Ç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}

I wish wish wish…

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}

I, Augustus (you know who)

That's extra, of course

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}

Are you feeling red?

A cat, an apple, etcetera

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}

With a zest of best

There's no no like a better no

Indeed, quite right, Mr M

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Sənəd yaradılıb 4 avqust 2005;
Son dəyişikliklər $Date: 2007/07/20 16:18:41 $ GMT