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