Bugün Ne Öğrendim ? CSS — Box Shadow Nedir? Nasıl Kullanılır ?
--
Merhaba arkadaşlar. Bugün yeni bir seri ile sizlerle birlikteyim. Bu serinin amacı, gün içerisinde öğrendiğim bir konu hakkındaki bilgileri ufak bir yazıyla sizinle de paylaşmak istiyorum. Bu bilgileri Bugün Ne Öğrendim? Başlığı altında yayınlamaya çalışacağım. Umarım size de faydası olur. Çok uzatmadan yazımıza geçelim :)
Box Shadow Nedir ?
Box-shadow, oluşturmuş olduğunuz elemanlara bir gölgelendirme efekti vermenizi sağlar.
Syntax
Syntax’ına bakacak olursak:
box-shadow: offset-x | offset-y | blur-radius | spread-radius | coloroffset-x parametresine verdiğiniz değer eğer negatif bir değerse gölgelendirme sol tarafa doğru kayar. pozitif ise sağa doğru kayar.
offset-y parametresine verilen değerin negatif olması durumunda ise gölgelendirme dikeyde yukarıya doğru, değer pozitif ise aşağıya doğru kayar.
blur parametresinin değeri ile gölgelendirmenin bulanıklığı ayarlanır.
- blur değerinin 0 olması durumunda gölgelenin her bir köşesi keskin köşelere sahip olur.
- blur negatif değerler kabul etmemektedir.
spread parametresi ile gölgelendirme efektinin etrafa yayılacağı alanın büyüklüğü belirlenir.
- spread parametresi pozitif değerlere sahip olması durumunda gölge boyutu büyür, negatif olması durumunda gölge küçülür.
color parametresi ile gölgenin rengi belirlenir.
inset parametresi ile gölgelendirmenin dışa doğru değil içe doğru gerçekleştirilmesi sağlanır.
- inset parametresini box-shadow özelliğinin ilk parametresi olarak veya son parametresi olarak yazabilirsiniz.
Bir elemana birden fazla gölgelendirme atayabiliriz.
Demo
Bir tane kutu oluşturalım.
Oluşturduğumuz bu kutuya box-shadow özelliğini kullanarak gölgelendirme verelim.
Her bir gölgelendirme efektini virgülle ayırarak birden fazla gölgelendirme atayabiliriz.
Browser Desteği
Box-shadow özelliğinin 98% oranında tarayıcı desteği bulunmaktadır.
Umarım faydalı bir yazı olmuştur. Eksik veya yanlış olduğunu düşündüğünüz kısımları bana iletirseniz çok sevinirim :)
İletişim kanalları: Twitter — LinkedIn — Mail
Bir sonraki yazıda görüşmek üzere!
Bu yazının referansı:
