Öğelerden gölgeleri (Photoshop'ta olduğu gibi genellikle "Alt Gölgeler" olarak adlandırılır) oluşturmada kullanılır. Mümkün olan en derin tarayıcı desteğine sahip bir örnek:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )Bu:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Gölgenin yatay uzaklığı (gerekli), pozitif, gölgenin kutunun sağında olacağı anlamına gelir, negatif bir sapma gölgeyi kutunun soluna koyar.
- Gölgenin dikey uzaklığı (gerekli), negatif olan, kutu gölgesinin kutunun üstünde olacağı anlamına gelir, pozitif olan ise gölgenin kutunun altında olacağı anlamına gelir.
- Bulanıklık yarıçapı (gerekli), 0 olarak ayarlanırsa, gölge keskin olacak, sayı ne kadar yüksekse, o kadar bulanık olacak ve gölge o kadar uzağa uzanacaktır. Örneğin, 5 piksellik yatay uzaklığa sahip ve 5 piksel bulanıklık yarıçapına sahip bir gölge, toplam gölgenin 10 piksellik kısmı olacaktır.
- Yayılma yarıçapı (isteğe bağlı), pozitif değerler gölgenin boyutunu artırır, negatif değerler boyutu azaltır. Varsayılan 0'dır (gölge bulanıklıkla aynı boyuttadır).
- Renk (gerekli) - onaltılık, adlandırılmış, rgba veya hsla gibi herhangi bir renk değerini alır. Renk değeri atlanırsa, ön plan renginde (metin
color) kutu gölgeleri çizilir . Ancak, eski WebKit tarayıcılarının (Chrome 20 öncesi ve Safari 6) renk atlandığında kuralı yok saydığını unutmayın.
Yarı saydam bir renk kullanmak rgba(0, 0, 0, 0.4)en yaygın olanıdır ve güzel bir efekttir, çünkü bittiğini tamamen / opak bir şekilde örtmez, ancak altındakinin gerçek bir gölge gibi biraz görünmesine izin verir.
Misal
İç gölge
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Misal
Internet Explorer (8 ve aşağı) Kutu Gölgesi
Fazladan bir öğeye ihtiyacınız var, ancak bu yapılabilir filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Yalnızca Tek Taraflı
Negatif bir yayılma yarıçapı kullanarak, bir kutu gölgesinde sıkışabilir ve onu yalnızca bir kutunun bir kenarından itebilirsiniz.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Çoklu Kenarlıklar ve Daha Fazlası
Kutu gölgesini istediğiniz kadar virgülle ayırabilirsiniz. Örneğin, bu, aynı öğe üzerinde farklı konumlara ve farklı renklere sahip iki gölgeyi gösterir:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Örnek, bunu birden çok kenarlık oluşturmak için nasıl kullanabileceğinizi gösterir:
Kalem Çoklu kutu-gölge soğukluğunu görün! Chris Coyier (@chriscoyier) tarafından CodePen'de.
Gölgeleri daha sonra manipüle ettiğiniz sözde öğelere uygulayarak, oldukça süslü 3B görünümlü kutu gölgeleri elde edebilirsiniz:
CodePen'de Halil İbrahim Nuroğlu (@haibnu) tarafından yazılan Pen CSS3 Box Shadows Efektlerini görün.
Birden çok virgülle ayrılmış değer aracılığıyla süper yumuşak gölgeler:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen smooth box-
shadow'a bakın.
Tarayıcı Desteği
Satıcı öneki kapsamına ilişkin ayrıntılar için sayfanın üst kısmındaki pasaja bakın. Bu, bu noktada ön eklerin kaldırılmasının oldukça makul olduğu özelliklerden biridir.