6.1 box-shadow xüsusiyyəti
CSS-də box-shadow xüsusiyyəti elementlərə kölgə əlavə etmək üçün istifadə olunur. Bu xüsusiyyət, veb-səhifələrin görünüşünü yaxşılaşdıraraq müxtəlif vizual effektlər yaratmağa imkan verir. Gəlin, box-shadow-un sinteksini, dəyərlərini və istifadə nümunələrini ətraflı nəzərdən keçirək.
box-shadow sinteksi
box-shadow xüsusiyyəti bir və ya bir neçə dəyər qəbul edir, hər biri kölgənin parametrlərini təyin edir. Ümumi sintaksis belə görünür:
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
Dəyərlər:
offset-x: kölgənin üfüqi yerdəyişməsi. Müsbət dəyərlər kölgəni sağa, mənfi dəyərlər sola hərəkət etdiriroffset-y: kölgənin şaquli yerdəyişməsi. Müsbət dəyərlər kölgəni aşağıya, mənfi dəyərlər yuxarı hərəkət etdirirblur-radius: kölgənin yayılma radiusu. Dəyər nə qədər böyük olsa, kölgə bir o qədər çox yayılar. Default dəyər — 0 (yayılmayan kölgə)spread-radius: kölgənin genişlənmə radiusu. Müsbət dəyərlər kölgənin ölçüsünü artırır, mənfi dəyərlər isə azaldır. Default dəyər — 0color: kölgənin rəngi. CSS-in dəstəklədiyi bütün rəng formatları istifadə edilə bilər
6.2 İstifadə nümunələri
Əsas kölgə:
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-basic">Əsas kölgə</div>
</body>
Təhrif edilmiş kölgə:
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-blur">Təhrif edilmiş kölgə</div>
</body>
Yayılma ilə kölgə:
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-spread">Yayılma ilə kölgə</div>
</body>
Daxili kölgə:
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-inset">Daxili kölgə</div>
</body>
6.3 box-shadow tənzimləmələri
box-shadow-un tənzimləmə detalları:
Kölgənin yerdəyişməsi (offset-x və offset-y)
- Müsbət dəyərlər: kölgə sağa (
offset-x) və aşağıya (offset-y) yerdəyişir - Mənfi dəyərlər: kölgə sola (
offset-x) və yuxarıya (offset-y) yerdəyişir
Kölgənin bulanıqlığı (blur-radius)
- 0 dəyəri: kölgə aydın olacaq, bulanıqlıq olmayacaq
- Müsbət dəyərlər: dəyər nə qədər böyükdürsə, kölgə bir o qədər bulanıq olacaq
Kölgənin yayılması (spread-radius)
- Müsbət dəyərlər: kölgə ölçüləri artır
- Mənfi dəyərlər: kölgə ölçüləri kiçilir
Kölgənin rəngi (color)
Rəng müxtəlif formatlarda təyin edilə bilər: rəng adı, onaltılıq kod, RGB, RGBA, HSL, HSLA.
Daxili kölgə (inset)
inset açar sözü element daxilində kölgə yaradır, bu isə basılmış effekt yaratmaq üçün istifadə oluna bilər.
Fərqli parametrlər ilə bir neçə kölgə:
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
<body>
<div class="multiple-shadows">Bir neçə kölgə</div>
</body>
GO TO FULL VERSION