Efect bayangan CSS
- Hal Sebelumnya Transisi Radial Warna CSS
- Hal Berikutnya box-shadow CSS
Buat efect bayangan dengan CSS!
Efect bayangan CSS
Dengan menggunakan CSS, Anda dapat menambahkan bayangan ke teks dan elemen.
Dalam tutorial kami, Anda akan belajar properti berikut:
text-shadowbox-shadow
Bayangan teks CSS
CSS text-shadow Properti menambahkan bayangan ke teks.
Penggunaan paling sederhana adalah hanya menentukan bayangan horizontal (2px) dan bayangan vertikal (2px):
Kesan bayang teks!
Contoh
h1 {
text-shadow: 2px 2px;
}
Berikutnya, tambahkan warna ke bayangan:
Kesan bayang teks!
Contoh
h1 {
text-shadow: 2px 2px red;
}
Lalu, tambahkan efek blur ke bayangan:
Kesan bayang teks!
Contoh
h1 {
text-shadow: 2px 2px 5px red;
}
Contoh di bawah ini menunjukkan teks putih dengan bayangan hitam:
Kesan bayang teks!
Contoh
h1 {
warna: putih;
text-shadow: 2px 2px 4px #000000;
}
Contoh di bawah ini menunjukkan bayangan pencahayaan neon merah:
Kesan bayang teks!
Contoh
h1 {
text-shadow: 0 0 3px #FF0000;
}
Banyak bayangan
Untuk menambahkan beberapa bayangan dalam teks, Anda dapat menambahkan daftar bayangan yang dipisahkan dengan koma.
Contoh di bawah ini menunjukkan bayangan pencahayaan neon merah dan biru:
Kesan bayang teks!
Contoh
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Contoh di bawah ini menunjukkan teks putih dengan bayang hitam, biru dan biru tua:
Kesan bayang teks!
Contoh
h1 {
warna: putih;
text-shadow: 1px 1px 2px hitam, 0 0 25px biru, 0 0 5px biru tua;
}
Anda juga boleh menggunakan properti text-shadow untuk mencipta batas bersayap (tanpa bayang):
Batu belah di sekeliling teks!
Contoh
h1 {
warna: kuning;
text-shadow: -1px 0 hitam, 0 1px hitam, 1px 0 hitam, 0 -1px hitam;
}
- Hal Sebelumnya Transisi Radial Warna CSS
- Hal Berikutnya box-shadow CSS
