CSS Box Shadow Oluşturucu
Elementleriniz için etkileyici gölgeler oluşturun
Hazır Şablonlar
Box Shadow Oluşturucu Hakkında
CSS box-shadow'u görsel olarak kurun — kaydırma, bulanıklık, yayılma, renk ve iç gölge — ve hazır kuralı stil dosyanıza kopyalayın.
Her değer ne yapar?
Sözdizimi box-shadow: x y bulanıklık yayılma renk şeklindedir. X ve Y gölgeyi yatay ve dikey kaydırır. Bulanıklık kenarı yumuşatır; 0 keskin kenar verir. Yayılma, bulanıklaştırmadan önce tüm gölgeyi büyütür veya küçültür — negatif yayılma içeri çeker, gölgeyi ögesinden daha dar yapmanın yolu budur. inset eklemek gölgeyi dışarıya değil kutunun içine çizer.
box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08); — yüzeyle teması veren dar ve koyu bir gölge, düşen gölgeyi veren geniş ve yumuşak bir gölge. Tek büyük bulanıklık yükseklik değil sis gibi okunur.Gölgem neden çamurlu görünüyor?
Genellikle yüksek opaklıkta saf siyah olduğu için. Gerçek gölgeler çevrelerinden renk alır; arka plan tonunuza doğru hafifçe renklendirilmiş, düşük opaklıklı bir gölge çok daha temiz görünür. İki hafif katman neredeyse her zaman tek güçlü katmanı yener.
Gölgeler performansa mal olur mu?
Büyük bulanıklık yarıçapları çizmesi pahalıdır, özellikle mobilde ve özellikle canlandırıldığında. box-shadow'u doğrudan canlandırmak her karede yeniden çizim zorlar; üzerine gelince yükselme istiyorsanız transform'u canlandırın ve büyük gölgeyi taşıyan ikinci bir ögeyi çapraz geçişle açın.