CSS box-shadow generatoru
Kölgə layını seçin, ofseti, bulanıqlığı və yayılmanı dəyişin — önizləmə dərhal yenilənir, aşağıda isə box-shadow üçün hazır CSS kodu görünür.
.box {
border-radius: 16px;
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
}Necə istifadə etmək olar
- Hazır nümunələrdən birini seçin (yumşaq, sərt, çoxlaylı, daxili, parıltı) və ya sıfırdan başlayın.
- Layı seçin və
x,yofsetini, bulanıqlığı (blur) və yayılmanı (spread) tənzimləyin. Daxili kölgə üçüninsetqutusunu işarələyin. - Rəngi və şəffaflığı seçin — kodda onlar
rgba()kimi yazılır. «+ Lay əlavə et» düyməsi ilə 5 lay qədər əlavə edə bilərsiniz. - Qutunun rəngini,
border-radiusvə səhifənin fonunu dəyişib effekti real şəraitdə yoxlayın, sonra «Kopyala» düyməsini basın.
Bu necə işləyir
box-shadow sintaksisi
Hər kölgə beş hissədən ibarətdir: üfüqi ofset, şaquli ofset, bulanıqlıq radiusu (blur), yayılma (spread) və rəng. Əvvələ inset yazılsa, kölgə elementin daxilində çəkilir. Bulanıqlıq mənfi ola bilməz, 0 kəskin kənar verir; yayılma isə mənfi ola bilər və kölgəni kiçildir. Kölgə layout-a təsir etmir və yer tutmur.
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);Bir neçə kölgə və lay sırası
Kölgələr vergüllə ayrılır. Siyahıda birinci kölgə ən üstdə çəkilir, sonrakılar onun altında qalır. Yumşaq və təbii görünüş üçün adətən bir iri kölgə əvəzinə üst-üstə bir neçə kiçik kölgə qoyulur: hər növbəti layda ofset və bulanıqlıq təxminən iki dəfə artırılır.
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.1),
0 4px 8px rgba(0, 0, 0, 0.1),
0 16px 32px rgba(0, 0, 0, 0.1);inset, spread və halqa effekti
inset kölgəni elementin daxilində, fonun üstündə, amma məzmunun altında çəkir — basılmış düymə və input sahəsi üçün əlverişlidir. Bulanıqlıq 0, yayılma isə müsbət olarsa, kölgə düz halqaya çevrilir: 0 0 0 3px rəngli çərçivəyə bənzəyir və səhifənin düzülüşünü sürüşdürmür.
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 3px #2563eb;box-shadow, drop-shadow və text-shadow
box-shadow həmişə elementin düzbucaqlı qutusunu və border-radius-u izləyir. Şəffaf PNG-nin və ya SVG-nin konturunu izləmək üçün filter: drop-shadow() istifadə edin — onda yayılma və inset yoxdur. Mətn üçün text-shadow var: üç uzunluq (x, y, blur) və rəng.
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);Tez-tez verilən suallar
Niyə kölgə görünmür?
Ən çox rast gəlinən səbəblər: valideyndəki overflow: hidden kölgəni kəsir; kölgənin rəngi fonla eynidir və ya çox şəffafdır. Həm də xarici kölgə elementin öz qutusunun içində çəkilmir — şəffaf fonlu elementdə o yalnız ətrafda görünür.
Kölgəni yalnız bir tərəfə necə vermək olar?
Mənfi yayılmanı ofsetlə birləşdirin: box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.5) yalnız aşağıda kölgə yaradır. Yayılma kölgəni hər tərəfdən kiçildir, ofset isə onu lazımi tərəfə itələyir.
box-shadow animasiya oluna bilərmi?
Bəli, transition: box-shadow 0.2s işləyir. Lakin iri bulanıqlıqlı kölgə hər kadrda yenidən çəkilir. Yüngül yol: kölgəni ::after pseudo-elementinə verib yalnız onun opacity dəyərini animasiya etmək.
Fokus göstəricisi üçün yalnız box-shadow kifayətdirmi?
Xeyr. Windows-un yüksək kontrast rejimində (forced-colors) brauzer kölgələri silir. Fokus halqasını outline ilə verin, kölgəni isə əlavə bəzək kimi saxlaya bilərsiniz.
