Box Shadow Generator
Generate box shadows
Generate box shadows Tarayıcınızda yerel olarak çalışır
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
Box Shadow Generator, canlı önizleme ve CSS ile ofset, bulanıklık, yayılma, renk ve opaklıktan oluşan bir gölge oluşturur. İnsanların karıştırdığı iki ayar bulanıklık ve yayılmadır: Bulanıklaştırma, gölgenin şeklinden dışarıya ve içeriye doğru kenarı yumuşatır; yayılma ise herhangi bir bulanıklık meydana gelmeden önce gölgenin kendi boyutunu büyütür veya küçültür. Negatif yayılma, yumuşak bir gölgenin hale gibi görünmesini engelleyen şeydir; buradaki varsayılanların küçük bir negatif değer kullanmasının nedeni budur.
Where people use the
- Kartlar, modeller ve menüler için bir yükseklik ölçeği oluşturma.
- İç gölgeyle basılmış veya odaklanmış bir durum oluşturma.
- Gerçek bir kenarlık eklemeden kenarlığı yumuşatma.
- Bir tasarım spesifikasyonunun gölge değerlerinin gerçekte nasıl göründüğünü kontrol etmek.
How to use the
- 1
Ofsetleri ayarlayın
Uzaklık X gölgeyi sağa hareket ettirir, uzaklık Y ise aşağı doğru hareket ettirir. Negatif değerler onu diğer yöne taşır.
- 2
Bulanıklaştırmayı ve yayılmayı ayarlayın
Bulanıklaştırma kenarı yumuşatır. Yayılma, bulanıklaşmadan önce gölgeyi genişletir; Öğenin etrafından ziyade altına oturan bir gölge için küçük bir negatif yayılma kullanın.
- 3
Renk ve opaklığı seçin
Tam opaklıkta saf siyah sert görünür. Yüzde 8 ila 20 arasındaki düşük bir opaklık, kirden ziyade derinlik anlamına gelir.
- 4
İç gölge istiyorsanız eki işaretleyin
İç metin, gölgeyi öğenin arkasına değil içine çizer, bu da sıkıştırılmış durumlara ve kuyucuklara uygundur.
- 5
CSS'yi kopyalayın
Kural rgba rengini içerir, böylece doğrudan bir stil sayfasına yapıştırılabilir.
İpuçları ve en iyi uygulamalar
- İki katmanlı gölgeler, tek bir ağır gölgeden çok daha iyi görünür.
- Işık kaynağını tutarlı tutun: eğer bir kart sağa doğru yanıyorsa, hepsi sağa doğru düşmelidir.
- Taşma gizliyken gölgelerin bir ebeveyn tarafından kırpıldığını izleyin.
Sık sorulan sorular
Bulanıklaştırma ve yayılma arasındaki fark nedir?
Yayılma, herhangi bir yumuşamadan önce gölgenin şeklinin boyutunu değiştirir; pozitif büyümek ve negatif ise küçülmek demektir. Bulanıklaştırma daha sonra kenarı verilen yarıçap kadar yumuşatır. Bir kartın altında sıkı bir gölge elde etmek için küçük bir bulanıklık ve biraz negatif bir yayılma istiyorsunuz.
Gölgem neden gri ve kirli görünüyor?
Çünkü yüksek opaklıkta saf siyahtır. 0,08 ila 0,2 civarında düşük bir alfa kullanın ve gölgeyi, çok daha doğal bir şekilde okunan arka plan rengine göre renklendirmeyi düşünün.
Birden fazla gölgem olabilir mi?
Evet. Aynı bildirimde birkaç gölgeyi virgülle ayırın; önden arkaya istiflenirler, böylece ilki üstte olur. Katmanlı gölgeler, ne kadar yumuşak ve gerçekçi bir yükseklik oluşturduğunu gösterir.
Kutu gölgesi düzeni etkiler mi?
Hayır. Gölgeler öğe kutusunun dışına boyanır ve yer kaplamaz, böylece taşma gizli olarak bir üst öğe tarafından veya sıkı bir kap ile kırpılabilirler.
Kutu gölgesini canlandırmak pahalı mıdır?
Evet, nispeten. Bulanıklığın veya yayılmanın değiştirilmesi, tarayıcının her karede gölgeyi yeniden boyamasına neden olur. Düzgün hareket için opaklığı canlandırın veya dönüştürün veya önceden oluşturulmuş iki gölge arasında çapraz geçiş yapın.