Veb səhifəni bəzəməyin başqa bir yolu CSS-də kölgə ilə mətn hazırlamaqdır. Bu üslubdan düzgün istifadə etməklə siz başlığı, paraqrafı və ya mətnin bir hissəsini uğurla vurğulaya bilərsiniz. Siz kölgə rəngini, ofset və bulanıqlığı tənzimləyə bilərsiniz.

Internet Explorer 9 və daha əvvəlki versiyalar istisna olmaqla, bütün brauzerlər tərəfindən dəstəklənən mətn kölgəsi xüsusiyyətindən istifadə edərək CSS-də mətn kölgəsi təyin edə bilərsiniz. Opera Mini ilə də problemlər var - bu brauzer əmlakı yalnız qismən dəstəkləyir. Aşağıda yazı üslubu və mülkiyyət dəyərləri nümunəsi verilmişdir:

H1 (mətn kölgəsi: 3px 5px 6px #6C9; )

Gördüyünüz kimi, boşluqla ayrılmış dörd dəyərə qədər qeyd etdik. Gəlin onu ardıcıllıqla keçirək:

• 3px – birinci dəyər kölgənin X oxu boyunca ofsetindən məsuldur (sağ, sol). Müsbət dəyər kölgəni sağa, mənfi dəyər isə kölgəni sola aparır.
• 5px – ikinci dəyər Y oxu boyunca kölgənin ofsetindən məsuldur (aşağı, yuxarı). Müsbət dəyər kölgəni aşağı, mənfi dəyər isə kölgəni yuxarı aparır.
• 6px – üçüncü dəyər kölgə bulanıqlığı radiusundan məsuldur. Bu parametr isteğe bağlıdır. Varsayılan olaraq, bulanıqlıq 0 pikseldir, bu da kölgəni aydın və bulanıq edir.
• #6c9 – dördüncü dəyər kölgənin rəngindən məsuldur. Bu parametr isteğe bağlıdır. Varsayılan olaraq, kölgə rəngi üslubun tətbiq olunduğu mətnlə eyni rəngə təyin edilir.

Brauzerdə kölgə necə görünür (ekran görüntüsü):

Ekran görüntüsü: kölgə ilə mətn, CSS

Mətn üçün çoxlu CSS kölgələri

Mətn-kölgə xüsusiyyəti üçün bir neçə dəyər qrupundan istifadə etmək də mümkündür. Bu o deməkdir ki, bir mətn üçün birdən çox kölgə təyin edə bilərsiniz. Bunu etmək üçün vergüllə ayrılmış dəyər qruplarını yazmalısınız.

H1 (mətn kölgəsi: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )

Bu üslubun tətbiqinin nəticəsi ekran görüntüsündə görünür:

Ekran görüntüsü: CSS mətni üçün çoxlu kölgələr

CSS mətn-kölgə xüsusiyyəti ilə həqiqətən gözəl şeylər yarada bilərsiniz. Təcrübə edə bilərsiniz: quraşdırın çox sayda müxtəlif kölgələr, şəffaflığı tənzimləmək üçün alfa kanalından istifadə edərək, rəngi yalnız hexadecimal deyil, həm də RGBA formatında təyin edin. Bu mülkə diqqət yetirsəniz, baş verə biləcək şey budur kifayət qədər miqdar diqqət:

Ekran görüntüsü: CSS-də 3D mətn kölgəsi

Tipoqrafiya veb-dizaynerlərin sevimli oyuncağıdır. CSS-nin çox maraqlı bir aləti var - mətn kölgəsi(mətn kölgəsi), ilk baxışdan olduqca sadə görünən, lakin onun köməyi ilə ixtiraçılıq və təxəyyüldən istifadə etsəniz, yaddaqalan effektlər yarada bilərsiniz.

Kölgə əsasları

Əmlak mətn kölgəsi istifadə etmək çox asandır. Bütün müasir brauzerlər tərəfindən və hətta prefikslərdən istifadə etmədən də dəstəklənir. Lakin IE-də (hətta IE9-da) dəstək yoxdur. Siz hətta IE-nin köhnə versiyalarında CSS3 effektlərini çıxarmağa kömək etmək üçün Modernizr kimi vasitələrdən istifadə edə bilərsiniz.

Sintaksis

Mətn kölgəsi yaratmaq üçün xassə sintaksisindən istifadə edin mətn kölgəsi hansı aşağıda verilmişdir. Müəyyən etmək üçün dörd parametr var: ilk ikisi kölgənin yerini təyin edir, üçüncüsü bulanıqlıq səviyyəsini, dördüncüsü isə kölgənin rəngini təyin edir.

Mətn-kölgə: horizontal_offset vertical_offset bulanıq rəng;

Aşağıda iki piksel aşağı və dörd piksel sağa ofset edilmiş, üç piksel bulanıqlaşdırılmış və 30% qeyri-şəffaflıqda qara rəngə təyin edilmiş mətn kölgəsi nümunəsidir.

Mətn-kölgə: 2px 4px 3px rgba(0,0,0,0.3);

Bu əmlakdan istifadənin nəticəsi belə görünəcək:

Niyə rgba istifadə olunur?

Xüsusiyyəti təyin edərkən kölgə rəngini təyin etmək üçün rgba-dan istifadə etmək lazım deyil. Bununla belə, rgba kölgəni təyin edərkən başqa bir ölçü əlavə edir - şəffaflıq səviyyəsi.

Bu üsul rəngin müəyyən edilməsinin digər üsullarından daha sadədir. Kölgə rənginin kölgəsini müəyyən etməyə diqqət yetirmək lazım deyil, bu, fon rəngindən bir qədər qaranlıq və ya daha açıq ola bilər. Rgba ilə siz sadəcə ağ və ya qaradan istifadə edə və rəngləri qarışdırarkən istədiyiniz fon rənginə nail olmaq üçün onların qeyri-şəffaflığını artıra bilərsiniz.

Əmlakdan istifadə mətn kölgəsi Siz sadə kölgələrlə məhdudlaşmamaqla mətn üçün müxtəlif effektlər yarada bilərsiniz. Məsələn, depressiyaya düşmüş mətnin illüziyasını yaratmaq üçün kod buradadır.

Əvvəlcə mətn rəngini fon rəngindən bir qədər tünd təyin etməlisiniz. Və sonra əmlakdan istifadə etməlisiniz mətn kölgəsi ağ rəng və artan şəffaflıq ilə.

Fon rəngi #222 və mətn rəngi 60% qeyri-şəffaflığa təyin edilib. Ağ kölgə 10% qeyri-şəffaflıq səviyyəsi ilə bir qədər aşağı və sağa yerləşdirilib.

Əsas (fon: #222; ) #text h1 (rəng: rgba(0,0,0,0.6); mətn kölgəsi: 2px 2px 3px rgba(255,255,255,0.1); )

Kölgəni ümumiyyətlə bulandırmağa ehtiyac yoxdur. Aydın bir kölgə veb sayt dizaynı ilə yaxşı uyğunlaşa bilər.

Mətn-kölgə: 6px 6px 0px rgba(0,0,0,0.2);

Əsl əyləncə yalnız bir kölgəyə sahib olmaq məhdudiyyətini atdığınız zaman başlayır. Tərifləri ayırmaq üçün vergüldən istifadə etməklə, istədiyiniz qədər kölgə istifadə edə bilərsiniz!

Mətn-kölgə: kölgə1, kölgə2, kölgə3;

Budur iki kölgədən istifadə nümunəsi. Birincisi fonla eyni rəngə malikdir.

Mətn-kölgə: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Uzun məsafə aşağı sürüşmə

Bir neçə kölgədən istifadə etməyi öyrəndikdən sonra nəticələr getdikcə daha dramatik olacaq. Mətn üçün 3D effekti yaratmaq çox asandır.

Nümunədə dörd kölgə istifadə olunur, hamısı müxtəlif məsafələrdə aşağı sürüşdürülmüş və bulanıqdır.

Mətn kölgəsi: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,01) );

Kiçik bir məsafəni aşağı sürüşdürün və çox bulanıqlayın

Budur, eyni fikrin başqa bir təcəssümü. Üç kölgə daha kiçik bir məsafəyə sürüşdürülür və daha bulanıq olur.

Mətn-kölgə: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

Mark Dotto tərəfindən 3D mətn

Effekt MarkDotto.com saytında istifadə olunur. Əla 3D effekti yaratmaq üçün 12 müxtəlif kölgədən istifadə edir.

Mətn kölgəsi: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0) ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Gordon Hall tərəfindən girintili mətn

Yuxarıdakı nümunədə diqqət yetirin, mən texnikamı “tez və çirkli” hərf effekti adlandırdım. Bunun səbəbi, daha inandırıcı olan bəzi ciddi şəkildə daxil edilmiş mətn yaratmaq üçün daha cəlbedici bir yol var.

Qordon yalnız xarici kölgəni deyil, həm də həqiqi daxili kölgəni çəkmək üçün ciddi CSS vudu istifadə edir. Texnikanın tam izahı üçün onun blog yazısına baxın.

Fon rəngi: #666666;

-webkit-background-clip: mətn;

-moz-background-clip: mətn;

fon klipi: mətn;

rəng: şəffaf;

mətn kölgəsi: rgba(255,255,255,0.5) 0px 3px 3px;

Parıltı

Mətn-kölgə: 0px 0px 6px rgba(255,255,255,0.7);

Əksər CSS effektləri kimi, kölgələri də həyata keçirmək çox asandır. Ancaq sadə hərəkətlərin birləşməsi heyrətamiz effektlərə səbəb ola bilər.

Vlad Merzheviç

Bir vaxtlar kölgələrlə mətn üçün müəyyən bir moda var idi və oxşar effekti demək olar ki, hər hansı bir veb saytında tapmaq olardı. Qrafik redaktorda kölgə əlavə etmək sadədir, əla görünür, burada saytın üslubundan və dizaynerin nisbət hissindən asılı olmayaraq kölgəli və veb səhifələrə çəkilmiş mətndir. Əksər brauzerlər mətn-kölgə üslubu xüsusiyyətini dəstəkləməyə başlayanda moda artıq keçmişdi və indi kölgəli mətn olduqca nadirdir. Bununla belə, mətn kölgəsinin az adamın şübhələndiyi bir sıra digər gizli istifadələri var. Bu xassədən istifadə edərək kontur mətni yarada, onu "çıxara", parıltı, bulanıqlıq yarada və s. edə bilərsiniz.

Mətn kölgəsindən istifadə

Dörd parametr dəyər kimi yazılır: kölgə rəngi, üfüqi və şaquli yerdəyişmə və kölgə bulanıqlığı radiusu (şək. 1).

düyü. 1. Mətn-kölgə parametrləri

Rəng bütün parametrlərin əvvəlində və ya sonunda istənilən uyğun CSS formatında yazıla bilər. Beləliklə, rgba formatından istifadə edərək şəffaf bir kölgə edə bilərsiniz. Müsbət ofset dəyərləri kölgəni sağa və aşağıya, mənfi ofset dəyərləri isə müvafiq olaraq sola və yuxarıya kölgə salır. Mətnin ətrafında kölgə olması üçün ofset dəyərlərini sıfıra təyin etmək kifayətdir. Bulanıqlıq radiusu kölgənin nə qədər kəskin olacağını təyin edir. Bulanıqlıq radiusu nə qədər böyükdürsə, kölgə bir o qədər yumşaq görünür.

Mətn-kölgəsinin böyük üstünlüyü, parametrlərini vergüllə ayıraraq bir neçə fərqli kölgə əlavə etmək imkanıdır. Bu xüsusiyyət əsasən müxtəlif effektlər yaratmağa imkan verir.

Təəssüf ki, 10.0 versiyasından əvvəlki IE mətn kölgəsini dəstəkləmir, ona görə də bu brauzerdə heç bir gözəllik görməyəcəyik.

Kontur mətni hər bir hərfin rəngi mətnin rəngindən fərqlənən xəttlə əhatə olunması ilə xarakterizə olunur (şək. 2). Bu effekt başlıqlar kimi böyük şrift ölçüsü ilə yaxşı görünür. Əsas mətn üçün konturdan istifadə yalnız oxunaqlılığı pozur.

düyü. 2. Mətnin konturunu çəkin

Kontur iki üsulla yaradıla bilər. Birinci üsulda biz sıfır kölgə ofsetini və kiçik bulanıqlıq radiusunu, sözün həqiqi mənasında 1-2 piksel təyin etdik (nümunə 1). Bulanıqlıq dəyərinin artırılması konturu mətn ətrafında parıltıya çevirir, bu da fərqli effekt verir.

Nümunə 1: Mətn kontur

Mətni kontur

Bu üsulla hazırlanmış kontur Şəkildə göstərilmişdir. 1. Kontur bir qədər bulanıq olur, buna görə aydın bir xətt əldə etmək istəyənlər üçün ikinci üsul nəzərdə tutulur. O, eyni rəngli dörd kəskin kölgədən istifadə etməkdən ibarətdir, onlar bir piksel müxtəlif bucaqlara köçürülür (nümunə 2).

Nümunə 2. Kontur üçün dörd kölgə

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Mətni kontur

Belə bir konturun görünüşü Şek. 3. Konturun daha ifadəli olması nəzərə çarpır.

düyü. 3. Dörd kölgə ilə kontur

Şəkildə göstərilən 3D mətn effektini əlavə etmək üçün. Şəkil 4-də eyni vaxtda bir neçə kölgə tətbiq olunur, onlar bir-birinə nisbətən üfüqi və şaquli olaraq bir piksel sürüşdürülür.

düyü. 4. 3D mətn

Şəxsən, bu tip mətn mənə retro üslublu hərfləri xatırladır və yenə də veb səhifənin əsas hissəsinə deyil, başlıqlara ən uyğun gəlir.

Kölgələrin sayı mətni nə qədər qabağa çəkmək istədiyinizdən asılıdır. Daha böyük rəqəm hərflərin "dərinliyini" artırır, daha kiçik bir rəqəm, əksinə, üçölçülülüyünü azaldır. Misal 3 eyni rəngli beş kölgədən istifadə edir.

Misal 3: Üçölçülülük əlavə etmək üçün kölgə

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

On kameralı soyuducu

Bütün kölgələr üçün bulanıqlıq radiusunu sıfıra və eyni rəngə təyin etdik. Kölgələr yalnız ofset dəyərlərində fərqlənir.

Mətn qabartması

Mətn qabartma və ya başqa sözlə, relyef effektini yaratmaq üçün mətnin rəngi fon rənginə uyğun olmalıdır. Səthin üstündə “çıxmış” hərflərin bir hissəsi işıqlandırılmış kimi görünür, digər hissəsi isə kölgədədir (şək. 5).

düyü. 5. Qabartma mətni

Bənzər bir effekt əlavə etmək üçün bizə iki kölgə lazımdır - ağ kölgəni bir piksel yuxarı sola, tünd boz kölgəni isə sağa doğru hərəkət etdiririk (nümunə 4).

Nümunə 4: Qabarıq mətn

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Qabartma mətni

Rölyef boz fonda ən yaxşı görünür, buna görə də effekt saytın hər rəng sxeminə uyğun deyil. Yeri gəlmişkən, sadəcə kölgə rənglərini dəyişdirmək əvəzinə sıxışdırmaq asandır;

Mətn-kölgə: #333 -1px -1px 0, #fff 1px 1px 0;

-webkit-background-clip: mətn;

Mətnin ətrafındakı parıltı eyni kölgədir, yalnız parlaq və təzadlıdır. Beləliklə, parıltı effekti yaratmaq üçün kölgə rəngini dəyişdirmək və istədiyiniz bulanıqlıq radiusunu təyin etmək kifayətdir. Mətnin ətrafındakı parıltı vahid olmalıdır, kölgə ofseti sıfıra təyin edilməlidir. Şəkildə. Şəkil 6-da müxtəlif rənglərdə parıltı nümunəsi göstərilir.

düyü. 6. Parlaq mətn

Misal 5. Parıltı

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Parlaq tərəf

Qaranlıq tərəf

Bulanıq

Kölgənin özü bulanıqdır, ona görə də yalnız kölgəni qoyub mətnin özünü gizlətsək, bulanıq hərflər alacağıq (şək. 7) və bulanıqlığın dərəcəsi mətn-kölgə parametrindən istifadə etməklə asanlıqla tənzimlənə bilər.

düyü. 7. Bulanıqlığı olan mətn

Orijinal mətni gizlətmək üçün rəngi şəffaf olaraq təyin edin (misal 6). Kölgə rəngi daha sonra mətn rəngi kimi çıxış edir və bulanıqlıq radiusu hərflərin bulanması dərəcəsini təyin edir.

Misal 6: Mətni bulandır

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Bulanıq mətn

Kölgə və psevdosinflər

Kölgənin birbaşa mətnə ​​əlavə edilməsi lazım deyil, mətn-kölgə xassəsi :hover və :first-letter psevdo-sinifləri ilə gözəl oynayır; Bunun sayəsində mətnlə maraqlı effektlər əldə edilir, məsələn, paraqrafın konturlu ilk hərfi və ya siçan kursorunu onun üzərinə apararkən keçidin parıltısı. Misal 7 belə texnikaları göstərir.

Misal 7: Pseudo-Siniflərdən istifadə

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Niş layihə, xərclərdən asılı olmayaraq ənənəvi kanalı ləngidir. Bazar strukturu, detallardan imtina edərək, əvvəlki kampaniyaların təcrübəsindən istifadə edərək, marketinq və satış departamentini sabitləşdirir. Brend qurulması, təbii ki, bazar seqmentini qazanaraq, konvergent PR-ni kortəbii şəkildə uzaqlaşdırır. İnvestisiya rolu sinxronlaşdırır sosial status

, artan rəqabət. Brend təbii olaraq əvvəlki kampaniyaların təcrübəsindən istifadə edərək yerləşdirmə planını müəyyən edir.

Təsvir

Sintaksis

Mətnə kölgə əlavə edir, həmçinin onun parametrlərini təyin edir: kölgə rəngi, yazıya nisbətən ofset və bulanıqlıq radiusu. Mətn-kölgə xassəsi :birinci hərf və :birinci sətir psevdo elementləri ilə birlikdə işləyə bilər.
mətn kölgəsi: heç biri | kölgə [,kölgə]*
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

kölgə haradadır:

Dəyərlər Heç biri kölgə əlavə etməyi ləğv edir. rəng İstənilən mövcud CSS formatında kölgənin rəngi. Varsayılan olaraq, kölgə rəngi mətn rənginə uyğun gəlir. Könüllü parametr. x-shift Mətnə nisbətən kölgənin üfüqi ofseti. Müsbət dəyər

Siz onları vergüllə ayıraraq bir neçə kölgə parametrini təyin edə bilərsiniz. CSS3 aşağıdakı ardıcıllığı nəzərə alır: siyahıda ilk kölgə ən yuxarıda, siyahıda sonuncu kölgə isə ən aşağıda yerləşdirilir. CSS2-də sıra tərsinə çevrilir: birinci kölgə ən aşağıya, sonuncu kölgə isə ən yuxarıya yerləşdirilir.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Sitruslar cənubun kolluqlarında yaşayarmı? Bəli, amma saxta nüsxə!

Nümunənin nəticəsi Şəkildə göstərilmişdir. 1.

düyü. 1. Safari brauzerində kölgə görünüşü

Brauzerlər

Opera maksimum 6-9 kölgə variantını dəstəkləyir. Bu dəyərin artırılması, eləcə də bulanıqlıq radiusunun 100px-dən yuxarı artırılması brauzerin işinə təsir edir. Opera versiyaları 9.5-10 CSS2-yə bənzər çox kölgəli ekrandan istifadə edir.

4.0 versiyasından əvvəlki Safari yalnız bir kölgə seçimini dəstəkləyir, qalanları nəzərə alınmır. 4.0 versiyasından bəri bir çox kölgələr artıq işləyir.

Internet Explorer yalnız 10.0 versiyasından bəri mətn kölgəsi xüsusiyyətini başa düşür. Bunun əvəzinə filtr xüsusiyyətindən istifadə olunur: Shadow(parameters) . Məsələn, aşağıdakı konstruksiya kölgənin rəngini (#666666), istiqamətini (şaqulidən 45°) və ofset miqdarını (4 piksel) müəyyən edir.

filtr: Kölgə(Rəng=#666666, İstiqamət=45, Güc=4);

Başlıqlarınızın düymələrin, panellərin rənglərinə uyğun gəlmədiyi və ya sadəcə mətnin səhifənin fonu ilə zəif ziddiyyət təşkil etdiyi zaman xoşagəlməz hisslər keçirmisinizmi? İstifadə etməklə CSS kölgələri Bu problem mətnin oxunaqlılığını və kontrastını yaxşılaşdırmaq üçün mətn-kölgə xüsusiyyətindən istifadə etməklə asanlıqla həll edilə bilər.

Verilən nümunələrdə mətn kölgələrindən istifadə edirik müxtəlif vəziyyətlər, bu sizə lazımi əsas verəcək ki, bu məsələni təkbaşına daha da öyrənə biləsiniz.

1. Əsas quraşdırma

Yenisini yaradın HTML faylı və ona aşağıdakı kodu əlavə edin HTML Və CSS:

HTML bölməsində etiket əlavə edin

mətn sinfi ilə:

Veb Kodu Geeks

Bu element üçün biz CSS mətn kölgəsi əlavə edəcəyik. Bu element üçün ilkin xassələri təyin etdim ki, ekranda gözəl görünsün:

İndi mətnə ​​mətn-kölgə atributunu təyin edək. Ancaq əvvəlcə bu atributun hansı dəyərləri aldığını anlayaq:

Mətn kölgəsi: 4px 4px 4px #ccc;

1. 4px - X ofset ( üfüqi);
2. 3px - Y oxunun ofseti ( şaquli);
3. 2px - bulanıqlıq dəyəri;
4. #ccc - rəng.

Bu aşağıdakı kimi təyin edilir:

Mətn-kölgə: üfüqi-ofset şaquli-ofset bulanıq rəng;

de rəng onaltılıq kod #ccc və ya RGBA (0,0,0,0.3) ilə təmsil oluna bilər; . CSS-də mətnimizə CSS daxili kölgəsini belə tətbiq edə bilərik:

.mətn(
şrift ölçüsü: 5em; /* mətni böyüdün */
mətn kölgəsi: 4px 3px 2px #ccc;
}

Bu kölgəli mətnin brauzer təsviri belə görünür:

NÜMUNƏ vebsayt

Sonra bədən elementinin fon rəngini müxtəlif yollarla dəyişdirəcəyik. Bəzi CSS kölgələri xüsusi fon tələb etdiyi üçün bunu edirik, əks halda onlar nəzərə çarpmayacaq. Mətnin daha gözəl görünməsi üçün onu böyük hərflə qoyacağıq.

2. İz effekti

Mətnin rəngini bir az daha seçin qaranlıq kölgə fondan daha çox. Sonra şəffaflığı azaldılmış kiçik ağ mətn kölgəsi tətbiq edin:

Bədən (
fon: #222;
}
.mətn(
şrift ölçüsü: 5em;
rəng: rgba(0,0,0,0,6); /* mətn rəngi */
mətn kölgəsi: 2px 2px 3px rgba(255,255,255,0.1); /* kölgə əlavə etmək */
}

RGBA kodundan istifadə edərək rəngin qeyri-şəffaflığını təyin edə bilərsiniz. Diqqət yetirin ki, mətn rənginin qeyri-şəffaflığı 60% (0,6), div CSS kölgələri isə 10% (0,1) qeyri-şəffaflığa malikdir.

NÜMUNƏ vebsayt

3. Retro kölgə effekti

Retro kölgələri həmişə bulanıq etmək lazım deyil. Məsələn, bu retro kölgəni götürün:

Bədən (
}
.mətn(
şrift ölçüsü: 5em;
rəng: ağ; /* mətn rəngini ağ rəngə dəyişdirin */
mətn kölgəsi: 6px 6px 0px rgba(0,0,0,0.2); /* retro kölgə əlavə edilir */
}

NÜMUNƏ vebsayt

4. İkiqat kölgə effekti

Maraqlıdır ki, birdən çox CSS şrift kölgəsi əlavə edə bilərsiniz. Bunu belə etmək olar: mətn-kölgə: kölgə1, kölgə2, kölgə3; Gəlin iki kölgə əlavə edək, biri fon rəngi, ikincisi isə bir qədər tünd:

Mətn (
şrift ölçüsü: 5em;
mətn kölgəsi: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); /* iki kölgə verir */
}

Fonumuz ağdır, ona görə də onun üçün başqa rəngə ehtiyacımız yoxdur. Brauzerdə effekt belə görünəcək:

NÜMUNƏ vebsayt

5. Uzaqdan kölgə effekti

Bu effekt bir neçə gözəl CSS kölgəsini təyin etmək funksiyasına əsaslanır. Aşağıda müxtəlif intensivlik dərəcələrində aşağıya doğru atılan dörd kölgə ilə effekti görə bilərsiniz:

Bədən (
fon: #fff3cd; /* fon rəngini dəyişdirin */
}
.mətn(
şrift ölçüsü: 5em;
rəng: ağ;
mətn kölgəsi: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0,15),
0px 24px 2px rgba(0,0,0,0,1),
0px 34px 30px rgba(0,0,0,0.1);
}

NÜMUNƏ vebsayt

6. Mark Dotto tərəfindən 3D effekti

Bədən (
fon: #3495c0; /* fon rəngini dəyişdirin */
}
.mətn(
şrift ölçüsü: 5em;
rəng: ağ;
mətn kölgəsi: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

İndi bu CSS daxili mətn kölgələrinin brauzerdə necə göründüyünə baxın:

NÜMUNƏ vebsayt

7. Realist Gordon Hall Cut Mətn Effekti

Gordon yalnız xarici kölgə deyil, həm də real daxili kölgə vermək üçün bəzi inkişaf etmiş CSS sehrindən istifadə edir:

Bədən (
fon: #cbcbcb; /* fon rəngini dəyişdirin */
}
.mətn(
şrift ölçüsü: 5em;
rəng: şəffaf;
fon rəngi: #666666;
-webkit-background-clip: mətn;
-moz-background-clip: mətn;
fon klipi: mətn;
mətn kölgəsi: rgba(255,255,255,0.5) 0px 3px 3px;
}

Və bu, kəsilmiş mətn effektini yaradır.

NÜMUNƏ vebsayt

8. Mətn parıltı effekti

bədən (
fon: #992d23; /* fon rəngini dəyişdirin */
}
.mətn(
şrift ölçüsü: 5em;
rəng: ağ;
mətn kölgəsi: 0px 0px 6px rgba(255,255,255,0.7);
}

Bu kölgə mətn üçün parlaq effekt yaradır:

NÜMUNƏ vebsayt

9. Artırılmış Mətn Effekti

bədən (
fon: #629552; /* fon rəngini dəyişdirin */
}
.mətn(
şrift ölçüsü: 5em;
rəng: rgba(0,0,0,0,6);
mətn kölgəsi: 2px 8px 6px rgba(0,0,0,0,2),
0px -5px 35px rgba(255,255,255,0.3);
}

NÜMUNƏ vebsayt

10. Uzun kölgə effekti

Bu təsir istifadə edərək edilə bilər

Fon rəngi: rgb(147, 201, 67);
mətn kölgəsi: 1px 1px rgb(131, 179, 60), 2px 2px rgb(131, 179, 60), 3px 3px rgb (131, 179, 60), 4px 4px rgb(131, 179, 65), rgb(131, 179, 60), 6px 6px rgb(131, 179, 60), 7px 7px rgb(131, 179, 60), 8px 8px rgb(131, 179, 60), 9px 9px, rgb17, 60), 10px 10px rgb(131, 179, 60), 11px 11px rgb(131, 179, 60), 12px 12px rgb(131, 179, 60), 13px 13px rgb(131, px617), (131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 179, 60), 18px (171,60px) ), 19px 19px rgb(131, 179, 60), 20px 20px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px rgb(131, px022, 60px), 131, 179, 60), 24px 24px rgb(131, 179, 60), 25px 25px rgb(131, 179, 60), 26px 26px rgb(131, 179, 60), 27px (271, px) ;
rəng: #eaeaea;

NÜMUNƏ vebsayt

Mətn-kölgə: 0px 0px 6px rgba(255,255,255,0.7);

Gördüyünüz kimi, mətn-kölgə xüsusiyyətindən istifadə etmək çox asandır və siz ondan öz yaradıcı CSS kölgələrinizi yaratmaq üçün istifadə edə bilərsiniz.