Utilore

CSS gölge oluşturucu

Sürgüleri oynatın, örnek onlarla birlikte değişsin. Tek gölge yetmediğinde katmanları üst üste koyun: gerçek arayüzlerin yumuşak ve inandırıcı derinliği böyle yapılır.

Katmanlar

Hazır ayarlar

Nasıl kullanılır

  1. Neye gölge vereceğinizi seçin: bir blok mu, metin mi.
  2. Kaydırmayı, bulanıklığı ve rengi ayarlayın: örnek anında yeniden çizilir.
  3. Derinlik gerekiyorsa bir katman ekleyin: iki üç soluk gölge, tek bir ağır gölgeden daha iyi okunur.
  4. Denetimlerin altındaki CSS satırını kopyalayın.

Bilmekte fayda var

Metin gölgesinin neden daha az ayarı var

text-shadow özelliği yalnızca kaydırma, bulanıklık ve renk alır. Yayılma ile iç gölge yalnızca box-shadow’a aittir ve fazladan tek bir değer bildirimin tamamını geçersiz kılar: tarayıcı onu sessizce atar ve gölge tümden yok olur. Metin kipine geçince bu iki denetim, yok sayılacaklarını ummak yerine gizlenir.

Birkaç soluk katman, tek ağır gölgeyi yener

Gerçek bir gölge tekdüze değildir: nesnenin hemen altında koyudur ve uzaklaştıkça dağılır. Büyük bulanıklıklı tek bir gölge gri bir hale bırakır; farklı kaydırmalara ve düşük saydamsızlığa sahip iki üç katmansa iyi yapılmış arayüzlerdeki derinliği verir. Araç her katmanı ayrı tutar ve kopyalanan satır onları sırasıyla listeler.

Sık sorulan sorular

Yayılma ne işe yarar?

Bulanıklık uygulanmadan önce gölgeyi büyütür ya da küçültür. Eksi değer gölgeyi içeri çeker, böylece yanlardan taşmaz; kart gölgelerinin derli toplu görünmesinin ardındaki püf noktası budur, çünkü orada parıltının bloğun çevresinde değil altında kalması gerekir.

İç gölgeyi nasıl yaparım?

«İç gölge» kutucuğunu işaretleyin: satırın başında inset anahtar sözcüğü belirir ve gölge bloğun içine geçer. Basılı düğmelerde ve giriş alanlarında kullanılır, çünkü orada derinliğin çıkıntı değil çukur olarak okunması gerekir.

Gölgem neden görünmüyor?

Çoğunlukla saydamsızlık sıfırdadır ya da kaydırma ile bulanıklığın ikisi de sıfırdır, böylece gölge tam olarak bloğun arkasına gizlenir. Öğenin üst kutusunda overflow: hidden varsa ve gölge görünür alanın dışına düşüyorsa da kaybolur.

Her tarayıcıda çalışır mı?

Evet. box-shadow da text-shadow da yıllardır standarttır ve ön ek gerektirmez; bu aracın ürettiği değerler, satıcıya özel hiçbir ek içermeyen düz CSS’tir.

İlgili araçlar