Bayangan Pada Text – HTML & CSS

Lebih Cantik Pake Bayangan

Sering kalian dengar Box-Shadow ? Ya, memberikan bayangan pada sebuah bentuk atau kotak. Pada tulisan atau text juga bisa kita berikan bayangan, tentunya tidak menggunakan tag box-shadow tapi kita menggunakan property / nilai pada CSS yang memang khusus untuk text agar bayangan lebih rapih dan mengikuti ukiran tulisan.

Kita juga dapat mengatur berapa radius blur pada bayangan, ketebalan bayangan dan lainnya.

Property apa yang digunakan ? Kita akan gunakan property “text-shadow” didalam CSS nya. Misalnya tulisan H1 seperti ini:

<h1> Contoh tulisan menggunakan text-shadow</h1>


Pada tag h1 diatas, kita akan berikan bayangan. Maka bayangan ini akan diterapkan untuk semua tulisan yang ada didalam tag h1 tersebut. CSS nya seperti ini:

h1 {
 text-shadow: 5px 7px 4px #00000;
}

h1 pada CSS diatas artinya kita akan berikan bayangan pada tulisan h1 yang ada di HTML. Sedangkan #00000 artinya warna hitam dan akan kita gunakan sebagai warna bayangan. Kalian bisa atur warna bayangan sesuai yang diinginkan tapi disini saya kasih contoh menggunakan bayangan warna hitam. Kemudian 5px 7px dan 4px itu apa ?

5px adalah koordinat Y (vertical), 7px adalah X (horizontal) dan 4px adalah tingkat blur pada bayangan. Apa nilainya harus segitu ?

Tidak ! Kalian bisa atur sesuai kebutuhan, bisa set angka-angka pada px tersebut berapapun yang kalian mau. Tapi saya kasih contoh misalnya dengan nilai diatas. Maka hasilnya akan seperti ini (lihat gambar). Kalo kurang bagus, kalian bisa set sendiri ya nilai-nilai nya yang saya jelaskan diatas.

Masih bingung ? Lihat : Video Tutorial Cara Tambah Bayangan Pada Tulisan.

Selamat mencoba !

tunggu sebentar...

POS Lainnya:

2
Tinggalkan Komentar

avatar
Rofi
Visitor
Rofi

Good
mksih

Ilham
Visitor
Ilham

Mantep niih

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi