Box Shadow Oluşturucu

Üst üste CSS gölgeleri için box shadow oluşturucu

Düz kartlar genellikle bir değil iki gölgeye ihtiyaç duyar: temas kenarı için sıkı ve koyu, yükselti için geniş ve soluk bir gölge. Bu box shadow oluşturucu en fazla altı katmanı bir listede tutar, her değişikliği bir önizleme kutusunda çizer ve hazır box-shadow bildirimini yazar. Sayfa "Katmanlı" hazır ayarı uygulanmış olarak açılır; böylece siz hiçbir şeye dokunmadan ekranda bir sonuç vardır.

Bir katmanın x ve y kayması, bulanıklığı, yayılması, rengi, opaklığı ve bir iç gölge anahtarı vardır. Bir katmanı silmeden gizleyebilirsiniz.

Hazır ayardan yapıştırılan CSS'ye

1. "Yumuşak", "Parıltı" veya "Neümorfizm" gibi bir hazır ayara tıklayın. Katman listesini, kutu rengini, sayfa rengini ve kenar yarıçapını doldurur.
2. Bir değeri kaydırıcısıyla değiştirin ya da yanına bir sayı yazın. Bir renk, seçiciyi veya 3 ya da 6 haneli bir onaltılık kodu kabul eder.
3. Yeni bir gölge için "Katman ekle"ye basın. Ok düğmeleri sırayı değiştirir, kopyalama düğmesi bir katmanı çoğaltır, çöp kutusu düğmesi onu kaldırır.
4. Önizlemenin gölgeyi gerçekten kullandığınız arka planda göstermesi için "Kutu rengi", "Sayfa rengi" ve "Kenar yarıçapı"nı tasarımınıza göre ayarlayın.
5. Bildirimin tamamı için "CSS'yi kopyala"ya, iki noktadan sonraki kısım için "Yalnızca değeri kopyala"ya basın.

Çıktı satırına neler girer

Listedeki ilk katman en üste boyanır. CSS virgülle ayrılmış bir listeyi bu sırayla okur ve araç hiçbir şeyi sıralamaz. Sıfır birimini kaybeder: 0 kayma 0px değil 0 olarak yazılır.

%100 opaklıktaki bir katman, #111827 gibi küçük harfli bir onaltılık renk alır. %100'ün altında rgb(0 0 0 / 15%) olarak yazılır ve opaklık yüzde olarak verilir. Gizli katmanlar dışarıda bırakılır. Tüm katmanlar gizliyse çıktı box-shadow: none; olur. Katmanlar ayrı satırlarda durur ve -webkit- öneki eklenmez.

Kaydırıcıların aşmadığı aralıklar

Kaymalar ve yayılma -100 ile 100 px arasında, bulanıklık 0 ile 200 px arasında, opaklık %0 ile %100 arasında ve kenar yarıçapı 0 ile 100 px arasında değişir. Tüm değerler tam sayıdır. Bir bulanıklık alanına 500 yazarsanız alandan ayrıldığınızda 200'e döner. En fazla altı katman olur ve kalan son katman kaldırılamaz.

Renkler onaltılık olmalıdır. red gibi adlar ve hsl() gibi değerler bir iletiyle reddedilir ve alan son geçerli renge döner. Önizleme kutusu sabit 150 px'lik bir karedir ve alanı büyük gölgeleri kenarda keser.

Hiçbir şey bu sekmeden çıkmaz

Değerler sayfadaki JavaScript ile CSS'ye dönüştürülür. Bir düğmeye basmak istek göndermez ve tarayıcınızın ağ paneli bunu gösterir. Kopyalama düğmeleri panoya yazar. Araç hiçbir şey saklamaz, bu yüzden yeniden yükleme "Katmanlı" hazır ayarını geri getirir.

Sık sorulan sorular (SSS)