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.
CSS Box Shadow Oluşturucu Nasıl Kullanılır
Değerleri tahmin etmek yerine bu araçla CSS box-shadow gölgelerini görsel olarak tasarlayın. Oluşturucu tarayıcınızda yerel çalışır ve girdiğiniz hiçbir şey yüklenmez.
- Gölgeyi yatay ve dikey hareket ettirmek için H-Offset ve V-Offset değerlerini ayarlayın.
- Kenarları yumuşatmak için Blur'u artırın, gölgeyi büyütmek veya küçültmek için Spread'i kullanın.
- Daha doğal bir görünüm için bir Color seçin ve Opacity değerini ayarlayın.
- Gölgeyi elementin çevresi yerine içine çizmek için Inset seçeneğini işaretleyin.
- Hazır box-shadow kuralını önizlemeden kopyalayıp stil sayfanıza yapıştırın.
Küçük bir blur ile hafif pozitif bir V-Offset, elementin hemen altında ince ve gerçekçi bir temas gölgesi oluşturur.
İlgili Araçlar
- CSS Border Radius Oluşturucu Görsel CSS border radius oluşturucu. Her köşeyi bağımsız ayarlayın, gerçek zamanlı önizleme ile CSS kodunu anında kopyalayın.
- CSS Gradyan Oluşturucu Görsel olarak muhteşem CSS gradyanları oluşturun. Birden fazla renk durağı, açılar ve konumlarla doğrusal, radyal ve konik gradyanlar oluşturun. Üretime hazır CSS kodunu anında kopyalayın.
- CSS Grid Oluşturucu Canlı önizlemeli ücretsiz görsel CSS Grid oluşturucu. Etkileşimli olarak duyarlı ızgara düzenleri tasarlayın ve üretim hazır CSS kodunu anında dışa aktarın.
- CSS Flexbox Oluşturucu Canlı önizlemeli görsel CSS Flexbox oluşturucu. Flex özelliklerini ayarlayın ve kullanıma hazır CSS kodu alın.
- Border Radius Oluşturucu Ücretsiz çevrimiçi yaratıcı border radius oluşturucu. 8 kulbu sürükleyin veya bir blob hazır şekli seçin, organik CSS biçimleri oluşturun ve kodu anında kopyalayın.
- Renk Dönüştürücü Ücretsiz çevrimiçi renk dönüştürücü. HEX, RGB, HSL, HSV formatlarını görsel seçici ile anında dönüştürün. %100 gizli, tarayıcınızda çalışır.
- CSS Easing Oluşturucu Ücretsiz çevrimiçi CSS easing oluşturucu. Etkileşimli eğri üzerinde cubic-bezier kontrol noktalarını sürükleyin, 18 hazır ayardan birini seçin, döngüde oluşan top animasyonunu izleyin ve zamanlama fonksiyonunu anında kopyalayın.
- CSS Text Shadow Oluşturucu Ücretsiz çevrimiçi text-shadow oluşturucu. Ofset, bulanıklık, renk ve opaklıkla birden fazla gölge katmanı üst üste dizin, Neon, 3D, Retro hazır ayarlarını deneyin ve CSS'i anında kopyalayın.