CSS Dersleri 38 - Kutu ve Metin Gölgelendirme

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Kutu ve Metin Gölgelendirmeyi öğreneceğiz.

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;
}

Çoklu Yazı Gölgelendirme

CSS'de metine birden fazla gölge eklemek için virgülle ayrılmış bir gölge listesi ekleyebilirsiniz.

Aşağıdaki örnekte kırmızı ve mavi bir neon ışıklı gölge gösterilmektedir:

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Aşağıdaki örnek, siyah, mavi ve koyu mavi gölgeli beyaz bir metni göstermektedir:

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Ayrıca, bazı metinlerin çevresinde (gölgeler olmadan) düz bir kenarlık oluşturmak için text-shadow özelliğini kullanabilirsiniz:

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

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;
}