Bu yazımızda Css’te Box Shadow özelliği nedir?, Nasıl kullanılır? onu öğreneceğiz. Box shadow özelliği ile etiketlerimize gölge verebiliyoruz.
Vereceğimiz değerler ile gölgenin x ve y eksenindeki konumunu, bulanıklığını ve rengini belirleriz.
İlk verilen değer x ekseni, ikinci verilen değer y ekseni, üçüncü verilen değer bulanıklık, dördüncü verilen değer de rengi için uygulanır.
Örneğin bir div etiketi tanımlayalım ve gölge efekti verelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> div{ width:200px; height:100px; background-color:cornflowerblue; box-shadow:10px 10px; } </style> <div></div> |
Gördüğünüz gibi div’in gölgesi 10px sağa ve 10px aşağı doğru kaymış oldu.
Üçüncü vereceğimiz değer ile gölgenin bulanıklaştırılmasını sağlayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> div{ width:200px; height:100px; background-color:cornflowerblue; box-shadow:10px 10px 5px; } </style> <div></div> |
Gördüğünüz gibi gölge 5px bulanıklaştı.
Dördüncü vereceğimiz değer ile gölgenin rengini değiştirelim.
Örneğin gölge rengini gri yapalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> div{ width:200px; height:100px; background-color:cornflowerblue; box-shadow:10px 10px 5px grey; } </style> <div></div> |
Gördüğünüz gibi gölge rengi gri oldu.
Son olarak şunu da söyleyelim. Bu şekilde oluşturulan gölgeler dışa doğru oluşuyor. Eğer gölgenin içe doğru oluşmasını istiyorsanız, beşinci değer olarak inset vermeniz gerekiyor.
Örneğin,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> #box1{ width:200px; height:100px; background-color:cornflowerblue; box-shadow:0px 0px 20px black; } #box2{ width:200px; height:100px; background-color:cornflowerblue; box-shadow:0px 0px 20px black inset; } </style> <div id="box1"></div> <div id="box2"></div> |
Gördüğünüz gibi ilk örnekte gölge dışarı doğru iken, inset kullandığımız örnekte gölge içe doğru oluştu.
Birkaç farklı örnek ve tarayıcıdaki görüntüleri ile konumuzu sonlandıralım.
Siz daha farklı değerler ile tasarımlarınızı dilediğiniz gibi yapabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style> div{ width:200px; height:100px; background-color:cornflowerblue; margin:30px; } #box1{ box-shadow: 0 8px 6px -6px black; } #box2{ box-shadow: 0 10px 6px -6px #777; } #box3{ box-shadow: 0 15px 10px #777; } /*Birden fazla gölgeyi aynı anda vermek için, aralarına virgül koyarak yazabiliriz.*/ #box4{ box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green; } </style> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<style> div { width: 160px; height: 50px; background-color: cornflowerblue; margin-bottom:20px; } #box1{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); } #box2{ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } #box3{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); } #box4{ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2); } #box5{ box-shadow: 0 12px 16px 0 rgba(0,0,0,0.3), 0 17px 50px 0 rgba(0,0,0,0.2); } </style> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div> <div id="box5"></div> |
Tarayıcı uyumluluğu ile ilgili bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
