CSS Gölge Oluşturucu
Nedir CSS Gölge Oluşturucu
Bir CSS gölge oluşturucu, box-shadow'u görsel olarak kurmanıza ve tam CSS kodunu kopyalamanıza olanak tanır. Yatay ve dikey konumu, bulanıklık yarıçapını, yayılmayı ve gölge rengini opaklığıyla birlikte ayarlayın, her kaydırıcıyı sürükledikçe önizlemenin güncellendiğini görün. Tek bir öğede birden çok gölgeyi üst üste koyabilir ve herhangi bir katmanı iç gölgeye geçirebilirsiniz, böylece çıktı kutusu her zaman yapıştırmaya hazır bir box-shadow bildirimi gösterir.
Nasıl kullanılır
- Gölgeyi yatay ve dikey olarak taşımak için konum kaydırıcılarını sürükleyin.
- Yumuşak bir kenar için bulanıklık yarıçapını, gölgeyi büyütmek veya küçültmek için yayılmayı ayarlayın.
- Gölge rengini seçin, opaklığı ayarlayın ve içten bir gölge için iç seçeneğini açın.
- Gerekiyorsa katman ekleyin, sonra oluşturulan CSS'i çıktı kutusundan kopyalayın.
Ne zaman kullanılır
Sert değil de modern görünen ince bir kart gölgesi mi lazım? Konumu 0px ve 10px, bulanıklığı 20px, yayılmayı sıfır ve rengi %25 opaklıkta siyah yapın, ardından box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); kodunu doğrudan stil dosyanıza kopyalayın. Düğme hover durumları, katmanlı derinlik ya da bir giriş alanını basılmış gösteren iç gölge için de aynı derecede kullanışlı.
Sık sorulan sorular
box-shadow değerleri ne anlama gelir?
Sırasıyla yatay konum, dikey konum, bulanıklık yarıçapı, yayılma ve renktir. Pozitif konumlar gölgeyi sağa ve aşağı iter, bulanıklık kenarı yumuşatır ve yayılma, gölge bulanıklaşmadan önce tüm gölgeyi büyütür veya küçültür.
Yayılma değeri ne işe yarar?
Yayılma, bulanıklık uygulanmadan önce gölgenin boyutunu değiştirir. Pozitif bir değer gölgeyi öğeden büyük yapar, negatif bir değer onu içeri çeker; bu, yalnızca bir kenardan taşan sıkı gölgeler için işe yarar.
Birden fazla gölgeyi üst üste koyabilir miyim?
Evet. İstediğiniz kadar katman ekleyin, her biri aynı box-shadow kuralı içinde virgülle ayrılmış bir gölge olur. Yumuşak ve geniş bir gölgeyi daha sıkı ve yakın bir gölgenin altına koymak, gerçekçi derinlik elde etmenin yaygın bir yoludur.
İç gölge nedir?
İç gölge, öğenin arkasına değil içine çizilir, böylece kutu basılmış veya çökmüş görünür. Değiştirmek için herhangi bir katmanda iç seçeneğini açın; bu, giriş alanlarında ve basılı düğmelerde iyi çalışır.
Bu aracı girdilerim hazır şekilde paylaşabilir miyim?
Evet. Kaydırıcıları ayarladıkça URL otomatik olarak güncellenir. Adres çubuğundan kopyalayın veya Paylaş düğmesini kullanın; bağlantıyı açan herkes tam olarak aynı gölgeyi kullanıma hazır görür.
İlgili araçlar
En Boy Oranı Hesaplama
En boy oranını hesaplayın, eksik genişlik veya yüksekliği bulun ve görselleri, videoları oranı bozmadan yeniden boyutlandırın. Ücretsiz.
Barkod Oluşturucu
Online EAN-13 veya Code 128 barkod oluşturun. Sayınızı veya metninizi girin, SVG ya da PNG olarak indirin. Ücretsiz, kayıt gerekmez.
Base64 Çözücü
Base64 dizelerini tarayıcınızda anında düz metne çözün. Emojiler dahil tam Unicode çıktı desteği. Ücretsiz online Base64 çözücü.