Bayangan Pada Text – HTML & CSS


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 !


Jangan Lupa Share !!!

33
2 komentar, 7 shares, 33 points

Apa Reaksimu ?

Bingung Bingung
7
Bingung
Kesal Kesal
5
Kesal
OMG OMG
7
OMG
Takut Takut
6
Takut
Keren Keren
4
Keren
Sedih Sedih
9
Sedih
Posciety Tech

Advanced Competent

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi. Dikelola oleh tim Posciety Tech.

2 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki