CSS box-shadow oluşturucu

Nasıl çalışır

Box-shadow belirli bir sırada dört sayı ve bir renk alır; derinlik gibi okunan bir gölge ile çıkartma gibi okunan bir gölge arasındaki fark tamamen bu sayılardadır. Sürüklerken değişmesini görmek, tahmin etmekten çok daha hızlıdır.

Dört sayı ne anlama gelir

Sırasıyla: yatay kaydırma, dikey kaydırma, bulanıklık yarıçapı ve yayılma. Kaydırmalar gölgeyi taşır; bulanıklık kenarını yumuşatır; yayılma, bulanıklaştırmadan önce onu büyütür veya küçültür. Negatif yayılma gölgeyi içeri çeker; bir kartın altında yanlara taşmayan sıkı bir gölge böyle elde edilir.

Gerçek görünmesini sağlamak

Işık genellikle yukarıdan gelir; bu yüzden yatay kaydırma olmadan küçük bir pozitif dikey kaydırma doğal okunur. Büyük, çok saydam gölgeler yumuşak derinlik gibi okunur; küçük, koyu, keskin olanlar kesilmiş bir çıkartma gibi okunur. Gerçek nesneler, yüzeyden uzaklaştıkça daha bulanık gölge düşürür — daha büyük bir bulanıklık daha yüksek bir öğeyi ima eder.

İç gölgeler

İç gölge, öğenin dışına değil içine çizilir; basılmış düğmeler, giriş alanları ve gömük paneller böyle yapılır. Aynı dört sayı geçerlidir, yalnızca içeriye bakar.

Aynı anda birkaç gölge

CSS virgülle ayrılmış bir liste kabul eder ve iki katman — biri sıkı ve koyu, diğeri geniş ve soluk — tek bir gölgeden epeyce iyi görünür. Bu oluşturucu bir tane üretir; katmanlı etki için ikisini kendiniz birlikte yapıştırın.