CSS Box Shadow Oluşturucu
CSS box-shadow bildirimini yatay ve dikey kaydırma, bulanıklık, yayılma, renk ve iç gölge ayarlarıyla oluşturun.
Aracı çalıştır
Bu araç, web arayüzü tasarımlarında kullanılan CSS box-shadow kodunu pratik şekilde hazırlamanıza yardımcı olur. Yatay kaydırma, dikey kaydırma, bulanıklık ve yayılma değerlerini piksel cinsinden sayısal olarak belirleyebilirsiniz. Dilerseniz gölge rengini metin kutusuna onaltılık renk kodu veya standart renk adı biçiminde girebilirsiniz. Kutunun içine doğru gölge efekti vermek istediğinizde iç gölge onay kutusunu işaretlemeniz yeterlidir. Tüm parametreler isteğe bağlıdır ve başlangıçta varsayılan değerlerle sunulur. Başlangıç ayarlarında 2 piksel yatay kaydırma, 2 piksel dikey kaydırma, 5 piksel bulanıklık, 0 piksel yayılma ve yarı şeffaf siyah renk (#00000033) yer alır. Gölgenin her iki eksende kaydırmasını, bulanıklığını ve yayılmasını sıfır olarak belirlediğiniz durumlarda bile araç geçerli bir CSS satırı oluşturur. Farklı arayüz kartları, butonlar ve kutu bileşenleri için dış gölgeler ya da içe gömülü derinlik efektleri üretebilirsiniz. Oluşturulan kutu gölgesi kuralını kopyalayarak stil dosyalarınıza doğrudan ekleyebilirsiniz. Değerleri arayüzde değiştirdiğinizde sonuç panelinde güncel CSS kuralı anında görünür.
Kullanım
- Yatay kaydırma (Offset X) ve dikey kaydırma (Offset Y) mesafelerini sayısal olarak girin.
- Gölgenin yumuşaklığı için bulanıklık (Blur) ve genişliği için yayılma (Spread) değerlerini yazın.
- Gölge rengini onaltılık renk kodu veya metin olarak belirtin.
- İç gölge efekti uygulamak istiyorsanız Inset onay kutusunu seçin.
- Sonuç alanında üretilen CSS box-shadow bildirimini kopyalayarak stil dosyanıza yapıştırın.
Örnekler
- Yatay kaydırma: 4, Dikey kaydırma: 4, Bulanıklık: 10, Yayılma: 0, Renk: #00000022 ayarları ile standart yumuşak bir dış kart gölgesi oluşturma.
- Yatay kaydırma: 0, Dikey kaydırma: 2, Bulanıklık: 4, Yayılma: 0, Renk: #00000040 ve Inset seçili durumda içe gömülü buton gölgesi oluşturma.
SSS
İç gölge oluşturmak için hangi ayar kullanılır?
Inset onay kutusunu işaretlediğinizde oluşturulan CSS kuralına inset anahtar sözcüğü eklenir ve gölge kutunun iç kısmına uygulanır.
Tüm sayısal değerleri sıfır olarak ayarlayabilir miyim?
Evet, yatay kaydırma, dikey kaydırma, bulanıklık ve yayılma alanlarına 0 değeri girildiğinde geçerli bir CSS bildirimi üretilir.
Renk alanına hangi değerler yazılabilir?
Varsayılan olarak sunulan #00000033 gibi onaltılık (hex) renk kodlarını veya geçerli CSS renk metinlerini girebilirsiniz.