Css Box Shadow Kullanımı

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.

css-dersleri-box-shadow-kullanimi-1

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.

css-dersleri-box-shadow-kullanimi-2

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.

css-dersleri-box-shadow-kullanimi-3

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,

css-dersleri-box-shadow-kullanimi-5

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.

css-dersleri-box-shadow-kullanimi-4

css-dersleri-box-shadow-kullanimi-6

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.

Leave a Reply