CSS'de Kutu ve Metin Gölgelendirme

CSS etiketlere Gölge efektleri eklemenize olanak sağlar. Bu özellikler :

  • text-shadow : Metinleri veya yazılara gölge efekti eklemek için kullanılır.
  • box-shadow : block türündeki elementlere gölge efekti vermek için kullanılır.

# CSS'de Yazı Gölgelendirme Nasıl Yapılır ? 

CSS'de yazı gölgelendirme işlemi için text-shadow özelliği kullanılır. En basit kullanımda text-shadow özelliğinin ilk parametresi yatay, ikinci parametresi dikey gölgelendirmeyi temsil eder. 

h1 {
  text-shadow: 2px 2px;
}

Yazı gölgeleme işlemine blur (bulanıklık) efekti eklemek için üçüncü parametreye değer ekleyin. 

h1 {
  text-shadow: 2px 2px 5px red;
}

Gölgeye bir renk eklemek için, en son parametreye renk değerini girebilirsiniz.

h1 {
  text-shadow: 2px 2px red;
}

# CSS'de Kutulara Nasıl Gölge Verilir ?

CSS'de kutulara gölge vermek için box-shadow özelliği kullanılır.
En basit kullanımında, yalnızca yatay gölgeyi ve dikey gölgeyi belirtirsiniz:

div {
  box-shadow: 10px 10px;
}

Gölgelendirmeye renk ve blur efekti eklemek için aşağıdaki kodu kullanabilirsiniz.

div {
  box-shadow: 10px 10px 5px grey;
}

# CSS box-shadow Kullanımı

CSS'de box-shadow özelliği kullanarak kutulara card görünümü sağlayabilirsiniz.

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Sorular (0)