Membuat Efek Bayangan pada Teks dengan CSS
Untuk membuat efek bayangan (shadow) pada teks, kita bisa menggunakan CSS.
Berikut adalah CSS yang bisa kita gunakan untuk membuat efek bayangan pada teks
h1 {
text-shadow: 2px 2px;
}
h1 adalah contoh elemen HTML yang ingin kita atur stylenya dengan bayangan.
Untuk membuat efek bayangan pada teks kita menggunakan properti text-shadow
Di contoh CSS di atas, kita membuat bayangan pada elemen h1 dengan horizontal shadow 2px dan vertical shadow 2px
Memberi Warna pada Bayangan
h1 {
text-shadow: 2px 2px red;
}
Di atas kita melihat ada value red (merah). Red ini adalah warna bayangan
Menambahkan Efek Blur pada Bayangan
h1 {
text-shadow: 2px 2px 5px red;
}
Di atas kita melihat ada value 5px. Ini adalah ukuran efek blur.
Membuat Teks Warna Putih dengan Bayangan Warna Hitam
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Di atas ada properti color dengan value white. Ini adalah properti dan value untuk membuat elemen teks menjadi berwarna putih.
Di atas kita melihat ada value #000000, ini adalah value untuk membuat bayangan menjadi berwarna hitam.
Membuat Teks Berwarna Hitam dengan Bayangan Cahaya Neon Merah
h1 {
text-shadow: 0 0 3px #FF0000;
}
Membuat Multiple Shadow
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
CSS di atas akan membuat bayangan berwarna merah dan cahaya neon biru.
Seperti yang Anda lihat di CSS di atas, antara value bayangan merah dan value bayangan cahaya neon biru dipisah dengan tanda koma
Keterangan :
- 0 0 3px #FF0000 adalah value untuk membuat bayangan berwarna merah
- 0 0 5px #0000FF adalah value untuk membuat bayangan berwarna cahaya neon biru.
Membuat Teks Berwarna Putih dengan Bayangan Hitam, Biru dan Biru Gelap
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Membuat Border pada Teks (Tanpa Bayangan)
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Catatan :
Di beberapa contoh di atas saya menggunakan elemen teks h1. Anda bisa mengganti h1 denga elemen teks yang lain, misalnya h2, h3, p atau elemen teks lainnya sesuai kebutuhan.
Penutup
Demikianlah telah saya uraikan bagaimana cara menambahkan efek bayangan pada teks menggunakan CSS. Semoga bermanfaat.
Posting Komentar untuk "Membuat Efek Bayangan pada Teks dengan CSS"