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 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;
}
Sorular (0)