UUID oluşturucu
Toplu olarak rastgele UUID’ler üretin.
CSS box shadow oluşturucu
Gölgeyi kaydırıcılarla şekillendirin, birden fazla katman ekleyin ve CSS’i kopyalayın.
Dosyalarınız cihazınızda kalır
Nasıl çalışır
- 1Kaydırma, bulanıklık ve yayılma için kaydırıcıları hareket ettirin.
- 2Bir renk ve opaklık seçin. İç gölge için Inset’i işaretleyin.
- 3Daha yumuşak ve doğal bir gölge için katman ekleyin.
- 4CSS’i kopyalayın.
Seçenekler ne işe yarar
- Kaydırmalar
- Gölgenin kutudan yatay ve dikey uzaklığı. Negatif değerler sola ve yukarı gider.
- Bulanıklık
- Kenarın ne kadar yumuşak olduğu. Sıfır, sert bir kenar verir.
- Yayılma
- Bulanıklaştırmadan önce gölgeyi büyütür veya küçültür. Negatif yayılma, büyük bir bulanıklığın yanlardan taşmasını önler.
- Inset
- Gölgeyi kutunun içine çizer, bastırılmış bir alan gibi.
- Katmanlar
- Birkaç gölge birlikte çizilir. İki veya üç hafif katman, tek ağır bir katmandan daha doğal görünür.
Gizlilik
Her şey tarayıcınızda çalışır. Yazdığınız hiçbir şey sunucuya gönderilmez.
Sık sorulan sorular
Neden birden fazla gölge katmanı kullanayım?
Gerçek gölgeler nesnenin yanında keskin, uzakta yumuşaktır. Küçük ve sıkı bir gölge ile büyük ve yumuşak bir gölge bunu taklit eder; bu, tek bir bulanıklıktan daha özenli görünür.
Box shadow yuvarlak köşeleri izler mi?
Evet, elemanın border-radius değerini izler. Yarıçap kaydırıcısı bunu gösterir ve kopyalanan CSS’e dahil edilir.
Büyük bulanıklıklar sayfayı yavaşlatır mı?
Birkaç sabit gölge sorun olmaz. Çok sayıda büyük bulanık gölge veya bunları canlandırmak zayıf telefonlarda maliyetli olabilir. Bunun yerine bir sahte elemanın opaklığını canlandırın.
drop-shadow() ile farkı nedir?
box-shadow dikdörtgen kutuyu izler. drop-shadow() filtresi ise saydam PNG ve SVG kenarları dahil görünen şekli izler.
Çıktıyı Tailwind veya başka araçlarda kullanabilir miyim?
box-shadow: sonrasındaki değer düz CSS’tir. Tailwind’de boşlukları alt çizgiyle değiştirerek keyfi bir değer olarak yazın.