CSS Box Shadow Oluşturucu
Ücretsiz çevrimiçi CSS box shadow oluşturucu. Ayarlanabilir ofset, bulanıklık, yayılma, renk ve inset ile görsel olarak güzel gölgeler oluşturun. Canlı önizleme ve anında kod kopyalama.
CSS box-shadow nedir?
CSS box-shadow, bir öğenin çerçevesi etrafına gölge efektleri ekleyen bir CSS özelliğidir. Ofset, bulanıklık yarıçapı, yayılma yarıçapı ve renk değerlerini belirterek düşme gölgeleri, iç gölgeler ve birden fazla gölge katmanı oluşturmanıza olanak tanır.
box-shadow parametreleri nelerdir?
box-shadow özelliği birkaç değer kabul eder: yatay ofset (X), dikey ofset (Y), bulanıklık yarıçapı, yayılma yarıçapı, renk ve isteğe bağlı inset anahtar kelimesi. Virgülle ayrılmış birden fazla gölge de belirtebilirsiniz.
Inset anahtar kelimesi nedir?
Inset anahtar kelimesi, gölgeyi dış gölgeden (düşme gölgesi) iç gölgeye dönüştürür. Inset belirtildiğinde, gölge öğenin kenarlığı dışında değil içinde çizilir ve bir ekleme etkisi yaratır.
Bulanıklık yarıçapı nedir?
Bulanıklık yarıçapı, gölge kenarının ne kadar bulanık olacağını belirler. 0 değeri keskin, sağlam bir kenar oluşturur. Daha büyük değerler, öğeden daha uzağa uzanan daha yayılmış, daha yumuşak bir gölge oluşturur.
Yayılma yarıçapı nedir?
Yayılma yarıçapı, gölge boyutunu genişletir veya daraltır. Pozitif değerler gölgeyi öğeden daha büyük yaparken, negatif değerler daha küçük yapar. Bu, bulanıklık uygulanmadan önce gölgeyi etkiler.
Birden fazla gölgeyi nasıl oluştururum?
Her gölge tanımını virgülle ayırarak birden fazla gölge oluşturabilirsiniz. Her gölge farklı ofset, bulanıklık, yayılma ve renk değerlerine sahip olabilir. Gölgeler bildirildikleri sırada uygulanır, ilk gölge en üsttedir.
Gölgeler için RGBA renklerini kullanabilir miyim?
Evet, RGBA, HSLA, HEX veya adlandırılmış renkler dahil herhangi bir CSS renk formatını kullanabilirsiniz. RGBA ve HSLA, arka planlarla doğal olarak karışan yarı saydam gölgeler oluşturmak için özellikle yararlıdır.
Oluşturulan CSS kodunu nasıl kopyalarım?
Oluşturucu arayüzündeki "Kodu Kopyala" düğmesine tıklamanız yeterlidir. CSS kodu panonuza kopyalanacak ve doğrudan stil sayfanıza veya HTML dosyanıza yapıştırılabilir.
box-shadow tüm tarayıcılarda destekleniyor mu?
Evet, box-shadow Chrome, Firefox, Safari, Edge ve Opera dahil tüm modern tarayıcılarda desteklenir. 2011'den beri CSS3'ün bir parçasıdır ve mükemmel tarayıcı uyumluluğuna sahiptir.
box-shadow performansı etkiler mi?
box-shadow, modern tarayıcılarda minimum performans etkisine sahiptir. Ancak, birçok öğede büyük bulanıklık yarıçapına sahip birden fazla karmaşık gölge kullanmak, özellikle mobil cihazlarda oluşturma performansını etkileyebilir.
box-shadow için yaygın kullanım durumları nelerdir?
Yaygın kullanımlar arasında kart yükseltme efektleri oluşturma, düğmelere derinlik ekleme, inset form alanları oluşturma, material design gölgeleri uygulama ve örtüşen öğeler arasında görsel ayırma ekleme bulunur.
box-shadow'u canlandırabilir miyim?
Evet, box-shadow CSS geçişleri veya animasyonları kullanılarak canlandırılabilir. Ancak, box-shadow'u canlandırmak performans açısından yoğun olabilir. Daha iyi performans için, bunun yerine opaklık geçişleri olan sahte öğeler kullanmayı düşünün.