CSS kutu gölgesi oluşturucu
Kaydırıcılarla bir gölge şekillendir, CSS'sini kopyala.
Kutu ve arka plan
Tarayıcında çalışır. Yazdığın hiçbir şey bir yere gönderilmez.
- 8 katmana kadar üst üste koy
- İçe gömük gölgeler
- 6 hazır şablon
Bir CSS kutu gölgesi nasıl yapılır
- Bir şablondan başla, veya kaydırma, bulanıklık ve yayılma kaydırıcılarını hareket ettir.
- Daha yumuşak, daha doğal bir gölge için katmanlar ekle.
- box-shadow satırını CSS'ine kopyala.
Her box-shadow değeri ne yapar
| Değer | Anlamı | Tipik aralık |
|---|---|---|
| Kaydırma X | Gölgeyi sağa, negatifse sola taşır | -100 ile 100px arası |
| Kaydırma Y | Gölgeyi aşağı, negatifse yukarı taşır | -100 ile 100px arası |
| Bulanıklık | Kenarı yumuşatır; 0 keskin kenarlı bir gölge verir | 0 ile 200px arası |
| Yayılma | Gölgeyi bulanıklaştırılmadan önce büyütür veya küçültür | -100 ile 100px arası |
| Opaklık | Gölge renginin ne kadar katı göründüğü | Doğal görünüm için %10 ile %30 arası |
Yaygın görünümler için başlangıç değerleri
| Şablon | Kaydırma Y | Bulanıklık | Yayılma | Opaklık |
|---|---|---|---|---|
| Yumuşak | 10px | 30px | -5px | %20 |
| Keskin | 6px (X de) | 0px | 0px | %100 |
| Parıltı | 0px | 24px | 4px | %55 |
| İçe gömük | 2px | 6px | 0px | %25 |
Katmanlı ve Havada şablonları, tek bir katmanın yeniden üretemeyeceği şekilde aynı anda iki veya üç gölgeyi üst üste koyarak bunların üzerine kurulur.
Doğal görünen gölgeler için ipuçları
- Gerçek ışık nadiren saf siyah bir gölge düşürür. %10 ile %30 opaklık kullan, daha yumuşak bir sonuç için rengi arka planın tonuna doğru eğ.
- Katmanlı ve Havada şablonlarının yapıldığı gibi, 2 veya 3 gölgeyi üst üste koy: kutuya yakın küçük, sıkı bir tane ve daha uzakta büyük, daha bulanık bir tane.
- Büyük bir dikey kaydırmayla negatif yayılma, modern arayüzlerde yaygın olan havada duran kart görünümünü verir.
- overflow: hidden olan bir üst öğe, içeriği kestiği gibi tam olarak bir gölgeyi de keser, bu yüzden her yerde overflow'u kaldırmak yerine üst öğeye dolgu ekle.
Gölge oluşturucu SSS
box-shadow değerleri ne anlama gelir?
Sırasıyla: yatay kaydırma, dikey kaydırma, bulanıklık yarıçapı, yayılma yarıçapı ve renk. Pozitif kaydırmalar gölgeyi sağa ve aşağıya taşır, inset anahtar sözcüğü ise onu kutunun içine çizer.
Bir gölgeyi nasıl doğal gösteririm?
Düşük opaklıkla iki veya üç yumuşak gölgeyi üst üste koy: kutuya yakın küçük, sıkı bir tane ve daha uzakta büyük, daha bulanık bir tane. Gerçek gölgeler nadiren tam güçte saf siyahtır.
Yayılma ne işe yarar?
Yayılma, gölgeyi bulanıklaştırılmadan önce büyütür veya küçültür. Büyük bir dikey kaydırmayla birlikte negatif bir yayılma, havada duran kart görünümünü verir.
Gölgem neden kesiliyor?
overflow: hidden olan bir üst öğe, gölgeler dahil kutusunun dışına çizilen her şeyi keser. Üst öğeye dolgu ekle veya overflow ayarını kaldır.
Kaç gölge katmanı üst üste koyabilirim?
Bu sayfada 8'e kadar. CSS'in kendisinde box-shadow katmanları için sabit bir sınır yok, ama 3 veya 4'ten fazlası nadiren farklı görünür ve çizmesi daha maliyetlidir.
Bir kutu gölgesi bir öğenin boyutunu veya boşluğunu değiştirir mi?
Hayır. Bir box-shadow tamamen görseldir ve bir kenarlık veya anahat gibi asla düzeni etkilemez, bu yüzden bir tane eklediğinde veya boyutunu değiştirdiğinde komşu öğeler asla kaymaz.