Css Box Shadow Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te box shadow özelliği nedir, nasıl kullanabiliriz 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.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 22 – Text Shadow Kullanımı

Sonraki : Css Dersleri 24 – Transition Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +