Efek bayangan CSS
- Hal Sebelumnya Transisi Radial Warna CSS
- Hal Berikutnya box-shadow CSS
Buat efek bayangan dengan CSS!
Efek bayangan CSS
Dengan menggunakan CSS, Anda dapat menambahkan bayangan di teks dan elemen.
Dalam tutorial kami, Anda akan belajar properti berikut:
text-shadowbox-shadow
Bayangan teks CSS
CSS text-shadow Atribut menambahkan bayangan ke teks.
Penggunaan paling sederhana adalah hanya menentukan bayangan horizontal (2px) dan bayangan vertikal (2px):
Efek Bayangan Teks!
Contoh
h1 {
text-shadow: 2px 2px;
}
Berikutnya, tambahkan warna ke bayangan:
Efek Bayangan Teks!
Contoh
h1 {
text-shadow: 2px 2px red;
}
Lalu, tambahkan efek blur ke bayangan:
Efek Bayangan Teks!
Contoh
h1 {
text-shadow: 2px 2px 5px red;
}
Contoh di bawah ini menunjukkan teks putih dengan bayangan hitam:
Efek Bayangan Teks!
Contoh
h1 {
warna: putih;
text-shadow: 2px 2px 4px #000000;
}
Contoh di bawah ini menunjukkan bayangan pencahayaan neon merah:
Efek Bayangan Teks!
Contoh
h1 {
text-shadow: 0 0 3px #FF0000;
}
Banyak bayangan
Untuk menambahkan beberapa bayangan di teks, Anda dapat menambahkan daftar bayangan yang dipisahkan koma.
Contoh di bawah ini menunjukkan bayangan pencahayaan neon merah dan biru:
Efek Bayangan Teks!
Contoh
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Contoh di bawah ini menunjukkan teks putih dengan bayangan hitam, biru dan biru tua:
Efek Bayangan Teks!
Contoh
h1 {
warna: putih;
text-shadow: 1px 1px 2px hitam, 0 0 25px biru, 0 0 5px biru tua;
}
Anda juga dapat menggunakan properti text-shadow untuk membuat bingkai teks (tanpa bayangan):
Bingkai yang mengelilingi 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
