CSS Box Shadow
- Önceki Sayfa CSS Gölge
- Sonraki Sayfa CSS Metin Etkileri
CSS box-shadow Özelliği
CSS box-shadow Özellik, gölgeleri ögeye uygular.
En basit kullanım, sadece yatay ve dikey gölgeleri belirtmektir:
Kırmızımtırak box-shadow ile kırmızımtırak <div> ögesi
Örnek
div {
box-shadow: 10px 10px;
}
Sonra, gölgeye renk ekleyin:
Kırmızımtırak box-shadow ile kırmızımtırak <div> ögesi
Örnek
div {
box-shadow: 10px 10px grey;
}
Sonra, gölgeye bulanık etki ekleyin:
Kırmızımtırak <div> ögesi, bulanık box-shadow ile
Örnek
div {
box-shadow: 10px 10px 5px grey;
}
Kart
Ayrıca kullanabilirsiniz box-shadow Özellik oluşturma kağıt kart efekti:
1
1 Ocak 2021
Kahve
Örnek
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;
}
CSS Gölge Özellikleri
Aşağıdaki tablo, CSS'nin gölge özelliklerini sıralar:
| Özellik | Açıklama |
|---|---|
| box-shadow | Bir elemente bir veya daha fazla gölge ekleyin. |
| text-shadow | Metinde bir veya daha fazla gölge ekleyin. |
- Önceki Sayfa CSS Gölge
- Sonraki Sayfa CSS Metin Etkileri
