7.1 text-shadow Xüsusiyyəti
CSS-dəki text-shadow xüsusiyyəti mətnə kölgələr əlavə etməyə imkan verir, bunun sayəsində daha həcmsal bir təsir yaranır və vizual qavrayış yaxşılaşdırılır. Bu xüsusiyyət, kölgənin ofseti, bulanıqlığı və rəngini idarə etməyə imkan verən geniş imkanlar təqdim edir.
text-shadow xüsusiyyəti elementin daxilindəki mətnlər üçün kölgə təyin edir. Bu, mətn elementlərinə vizual vurğu əlavə edərək, kölgənin mövqeyini, bulanıqlığını və rəngini idarə etməyə kömək edir.
Sintaksis:
element {
text-shadow: offset-x offset-y blur-radius spread-radius color;
}
Parametrlər:
offset-x: kölgənin üfiqi üzrə ötürməsioffset-y: kölgənin şaquli üzrə ötürməsiblur-radius: kölgənin bulanıqlıq radiusu (məcburi deyil)color: kölgənin rəngi (məcburi deyil)
Dəyərlər:
offset-xvəoffset-y: mətndən asılı olaraq kölgənin ötürməsini təyin edir. Müsbət və mənfi dəyərlər ala bilərblur-radius: kölgənin bulanıqlıq səviyyəsini müəyyən edir. Dəyər nə qədər böyük olarsa, kölgə o qədər bulanıq görünəcək. Varsayılan dəyər — 0 (bulanıqlıq yoxdur)color: kölgənin rəngini təyin edir. Əgər rəng göstərilməzsə, mətndəki rəng istifadə olunur
İstifadə nümunəsi:
.shadow-basic {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.shadow-blur {
font-size: 24px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.shadow-color {
font-size: 24px;
text-shadow: 2px 2px 2px red;
}
.shadow-multiple {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.3);
}
<body>
<p class="shadow-basic">Sadə kölgə</p>
<p class="shadow-blur">Bulanıqlı kölgə</p>
<p class="shadow-color">Rəngli kölgə</p>
<p class="shadow-multiple">Çoxsaylı kölgələr</p>
</body>
Kodun izahı:
.shadow-basic: üfiq və şaquli üzrə2pxötürməli, bulanıqlıq radiusu2pxolan yarı şəffaf qara rəngli sadə kölgə tətbiq edir.shadow-blur: daha böyük bulanıqlıq dəyəri əlavə edir (5px), daha çox bulanıq kölgə yaradır.shadow-color: rəng (qırmızı) ilə kölgə tətbiq edir.shadow-multiple: fərqli ötürmələr və bulanıqlıqlara malik iki kölgə tətbiq edir, kompleks çoxqatlı effekt yaradır
7.2 Nümunələr
1. Yumşaq kölgə
Böyük bulanıqlıq radiusu ilə yumşaq kölgə:
.soft-shadow {
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<body>
<p class="soft-shadow">Mətnin yumşaq kölgəsi</p>
</body>
Kod izahı:
.soft-shadow: mətn üzərində heç bir yerdəyişmə olmadan və böyük bulanıqlıq radiusu ilə (10px) yumşaq parlaq effekt yaradır
2. Parlaq kölgə
Parlaq rəngli və yüngül bulanıqlıq kölgəsi:
.colorful-shadow {
font-size: 24px;
text-shadow: 3px 3px 5px blue;
}
<body>
<p class="colorful-shadow">Parlaq rəngli kölgə</p>
</body>
Kod izahı:
.colorful-shadow: parlaq rəngli (mavi),3pxyerdəyişmə ilə və5pxbulanıqlıq radiusu olan kölgə tətbiq edir
3. Bir neçə kölgə
Fərqli parametrlərə malik bir neçə kölgə:
.multi-shadow {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}
<body>
<p class="multi-shadow">Mətn üzərində bir neçə kölgə</p>
</body>
Kod izahı:
.multi-shadow: fərqli parametrlərə malik iki kölgə tətbiq edir: biri yüngül yerdəyişmə və bulanıqlıq ilə, digəri isə böyük yerdəyişmə və qırmızı rəngdə bulanıqlıqla
7.3 Vacib məqamlar
text-shadow istifadə edərkən vacib məqamlar
Brauzerlərin uyğunluğu
text-shadow xüsusiyyəti bütün müasir brauzerlər tərəfindən dəstəklənir, o cümlədən Google Chrome, Firefox, Safari, Edge və Opera. Ancaq brauzerlərin köhnə versiyalarında kölgələrin düzgün göstərilib-göstərilmədiyini yoxlamaq vacibdir ki, cross-browser uyğunluğu təmin olunsun.
Performans
Çoxlu ofsetlər və blur ilə olan mürəkkəb kölgələrdən istifadə performansa təsir edə bilər, xüsusən də mobil cihazlarda. Performansı yaxşılaşdırmaq üçün kölgələri optimallaşdırın və müxtəlif cihazlarda test edin.
Əlçatanlıq
Əmin olun ki, kölgələr mətnin oxunaqlığını pisləşdirmir. Mətn və fon arasındakı kontrast bütün istifadəçilər, o cümlədən görmə qabiliyyəti zəif olanlar üçün kifayət qədər olmalıdır.
text-shadow xüsusiyyəti CSS-də mətn kölgələri yaratmaq üçün güclü alətlər təqdim edir. Bu, sadə kölgələrdən tutmuş, müxtəlif rənglər və blur ilə mürəkkəb çoxqatlı kölgələrə qədər müxtəlif effektlər əlavə etməyə imkan verir.
text-shadow-dan istifadə edərək, mətnin vizual qavranışını yaxşılaşdırmaq olar, veb-səhifə dizaynına dərinlik və həcm əlavə edir. Mürəkkəb kölgələrdən istifadə edərkən brauzerlərin uyğunluğunu və performansı nəzərə alaraq, həmçinin bütün istifadəçilər üçün əlçatanlığı unutmayın.
GO TO FULL VERSION