CSS Box Shadow Oluşturucu
Kaydırıcılarla offset, bulanıklık, yayılım, renk, opaklık ve iç gölge seçeneklerini ayarlayarak katmanlı CSS box-shadow'lar oluşturun — gerçek bir öğede önizleyin ve yapıştırmaya hazır CSS'yi anında kopyalayın.
box-shadow: —;
Her şey tarayıcınızda canlı olarak güncellenir — yükleme yok, kayıt yok, tamamen ücretsiz.
CSS Box Shadow Oluşturucu Hakkında
CSS Kutu Gölgesi Oluşturucu, kod içinde değerleri tahmin etmek yerine kutu gölgelerini görsel olarak tasarlamanızı sağlar. Yatay ve dikey kayma, bulanıklık yarıçapı, yayılma yarıçapı, renk ve opaklık için kaydırıcıları sürükleyin; bir iç gölge (inset) seçeneğiyle birlikte gerçek bir öğenin canlı olarak güncellendiğini izleyin. Görünüm doğru olduğunda, yapıştırmaya hazır CSS'i tek tıkla kopyalayın.
Modern arayüz gölgeleri nadiren tek katmanlıdır. Bu oluşturucu üst üste binen gölge katmanlarını destekler: katmanları ekleyin, çoğaltın, gizleyin veya kaldırın ve yalnızca seçili katmanı ya da tüm katmanları birleştirilmiş olarak önizleyin. Yumuşak geniş bir gölgenin altına dar koyu bir gölge katmanı eklemek, cilalı kartların ve butonların derinlik kazanma şeklidir.
Önizleme öğesinin kendisini de stillendirebilirsiniz: kutu rengi, kenar yuvarlaklığı ve tuval arka planı; böylece gölge, koyu yüzeyler dahil gerçekçi bir bağlamda değerlendirilir. Bir hazır ayardan başlayın, ilham için "Katmanı rastgele oluştur"a basın ve ne zaman temiz bir sayfa isterseniz sıfırlayın. Her şey tarayıcınızda çalışır.
CSS Box Shadow Oluşturucu Nasıl Kullanılır
- Yatay kayma, dikey kayma, bulanıklık, yayılma, renk ve opaklık kaydırıcılarını ayarlayın; bir iç gölge istiyorsanız "Inset shadow"u açın.
- Gölgeleri üst üste yığmak için "Katman ekle" veya "Katmanı çoğalt"a tıklayın ve her birini ince ayarlamak için önizleme modunu "Bu katman" ile "Tüm katmanlar" arasında değiştirin.
- Önizlemenizin gerçek tasarımınızla eşleşmesi için öğeyi ve tuvali ayarlayın: kutu rengi, kenar yuvarlaklığı ve arka plan.
- Boş bir kaydırıcı setinden başlamak yerine bir başlangıç noktası isterseniz bir hazır ayar uygulayın veya "Katmanı rastgele oluştur"u kullanın.
- Tam CSS kuralını (veya yalnızca değeri) kopyalayın ve stil sayfanıza yapıştırın.