İlginizi Çekebilir

CSS Gölge Efekti

CSS Gölge Efekti

CSS Gölge efekti ile, resimlerimizi, yazılarımızı ve kutuları gölgelendirmek mümkün. Site içerisinde bulunan elemanlara gölge ekleyerek değişik bir hava oluşturabiliriz.
CSS ile gölgelendirme yaparken 2 farklı seçeneğimiz bulunmakta. Text-shadow ve box-shadow.
İsimlerinden de anlaşılacağı gibi text-shadow ile; metinlerimizde gölgelendirme yaparken, box-shadow ile; kutularda (div) gölgelendirme yapmaktayız.
 
Gölgelendirme yaparken, gölge etiketini kullandıktan sonra 4 adet parametre belirlememiz gerekmektedir.
box-shadow: 2px 25px 10px yellow;

Birinci değerimiz olan 2px = gölgenin sağ/sol konumunu belirler.
İkinci değerimiz olan 25px = gölgenin üst/alt konumunu belirler.
Ücüncü değerimiz olan 10px = gölgenin bulanıklık değerini belirler.
Dördüncü değerimizde ise renk belirtmekteyiz. HTML Renk kodları için buraya tıklayabilirsiniz.
 

Metin Gölgelendirme (text-shadow)

Metinlerimize gölge eklemek istersek text-shadow etiketini kullanmalıyız. Örnekler yardımıyla nasıl olduğunu inceleyelim.

Kod Kampüsü | CSS Gölge Efekti


Kod Kampüsü | CSS Gölge Efekti


Kod Kampüsü | CSS Gölge Efekti


Kod Kampüsü | CSS Gölge Efekti


Kod Kampüsü | CSS Gölge Efekti

 
 

Kutu Gölgelendirme (box-shadow)

Metinlerde olduğu gibi aynı zamanda kutularda da gölgelendirme yapmaktayız. Örneklerle beraber inceleyelim.

  • Sağ Gölgeli Kutu
  • Gölgemizi sağdan gölgeli yapmak için, birinci değerimiz üzerinden yapmamız gerekiyor. Birinci değerimiz bildiğiniz üzere gölgenin sağ/sol konumunu temsil ediyordu. + değer alırsa sağ, – değer alırsa sola doğru konumlandırma yapacaktır.
    Biz sağ konumlu bir gölge yapmak istediğimiz için ilk değerimizi 10px olarak belirtiyoruz.


  • Sol Gölgeli Kutu
  • Gölgemizi soldan gölgeli yapmak için, birinci değerimiz üzerinden yapmamız gerekiyor. Birinci değerimiz bildiğiniz üzere gölgenin sağ/sol konumunu temsil ediyordu. + değer alırsa sağ, – değer alırsa sola doğru konumlandırma yapacaktır.
    Biz sol konumlu bir gölge yapmak istediğimiz için ilk değerimizi -10px olarak belirtiyoruz.


  • Üst Gölgeli Kutu
  • Gölgemizi üstten gölgeli yapmak için, birinci değerimiz üzerinden yapmamız gerekiyor. İkinci değerimiz bildiğiniz üzere gölgenin üst/alt konumunu temsil ediyordu. + değer alırsa alt, – değer alırsa üste doğru konumlandırma yapacaktır.
    Biz üst konumlu bir gölge yapmak istediğimiz için ilk değerimizi -10px olarak belirtiyoruz.


  • Alt Gölgeli Kutu
  • Gölgemizi alttan gölgeli yapmak için, birinci değerimiz üzerinden yapmamız gerekiyor. İkinci değerimiz bildiğiniz üzere gölgenin üst/alt konumunu temsil ediyordu. + değer alırsa alt, – değer alırsa üste doğru konumlandırma yapacaktır.
    Biz alt konumlu bir gölge yapmak istediğimiz için ilk değerimizi 10px olarak belirtiyoruz.


    Şimdi de örneklerle kutu gölgelendirmenin çeşitlerini inceleyelim.

      kutu1

      kutu2

      kutu3


    Kutumuza birden fazla gölge ekleyerek arka arkaya gölgelendirme oluşturalım.


    inset parametresi ile iç gölgelendirme yapabilmekteyiz. İçten gölgeli bir kutu oluşturmuş olduk.


    Çapraz köşelerden gölgeler olacak şekilde bir kutu ayarlayalım.

     
     

    Resim Gölgelendirme

    Yazılara, kutulara gölge ekleyebildiğimiz gibi resimlere de gölge eklemesi yapabiliriz. box-shadow ile yapılacak olan bu gölgelendirmede örneklerle beraber nasıl olduğunu inceleyelim.

    CSS Gölge Efekti


    CSS Gölge Efekti

    Yorum Yap

    Yorum Yap