Mempercantik Tampilan Teks dengan Mudah Menggunakan CSS Text-shadow

Mempercantik Tampilan Teks dengan Mudah Menggunakan CSS Text-shadow

Text-shadow merupakan properti sederhana pada styling html untuk memberikan efek bayangan pada tiap karakter dalam teks. Namun dengan atribut sederhana tersebut dapat dihasilkan tampilan…

Text-shadow merupakan properti sederhana pada styling html untuk memberikan efek bayangan pada tiap karakter dalam teks. Namun dengan atribut sederhana tersebut dapat dihasilkan tampilan yang menarik pada teks di situs Anda.

Sebelum berkreasi dengan menggunakan text-shadow, mari kita kenali lebih dalam mengenai text-shadow. Text-shadow pertama kali muncul bersama CSS2 belasan tahun lalu. Oleh karena itu, pada saat ini, penggunaan text-shadow telah didukung oleh sebagian besar aplikasi web browser yang ada. Properti text- shadow terdiri dari posisi bayangan, panjang rentang blur, serta warna bayangan.

h1{text-shadow: 1px 2px 3px black}

Maksud dari kode di atas adalah semua teks heading 1 pada situs kita akan memiliki bayangan yang terletak 1 pixel di kanan teks dan 2 pixel di bawah teks, memiliki rentang blur 3 pixel, serta berwarna hitam. Dua nilai pertama pada kode tersebut berisi koordinat X dan Y bayangan terhadap teks. Nilai ketiga menunjukkan rentang blur bayangan. Nilai terakhir adalah warna bayangan dalam format warna standar html (misal: black, #000, #000000, rgba(0,0,1,0.5)). Text-shadow juga mendukung penggunaan lebih dari satu bayangan untuk satu teks (multiple shadows).

Nah, untuk memahami lebih jauh mengenai text-shadow, sekarang saatnya kita mengaplikasikannya dalam web. Sebagai contoh, pada tutorial ini akan kita percantik tampilan heading Bisa Komputer berikut.

  1. Teks Normal

    Tampilan Teks Normal

  2. Teks Single
    Tambahkan efek bayangan dasar yang memberikan kesan tulisan yang timbul seperti pada gambar di bawah dengan kode berikut.

    h1{text-shadow: 2px 2px 2px #666}

    Tampilan Teks Single

  3. Teks Multi
    Untuk memberikan kesan efek yang lebih detail, gunakan multiple shadows dengan kode seperti berikut untuk menghasilkan teks seperti pada gambar di bawah.

    h1{text-shadow: 2px 2px 2px #666, 5px 5px 10px #999}

    Tampilan Teks Multi

    Jadilah tampilan heading yang lebih menarik dengan kesan 3 dimensi. Selamat berkreasi dengan menggunakan text-shadow.

Berikut ini adalah beberapa contoh efek yang bisa dihasilkan dengan text-shadow:

  • Teks Bevel

Tampilan Teks Bevel

  • Teks Emboss
    Tampilan Teks Emboss

 

  • Teks Fire

Tampilan Teks Fire

 

 

Tag: , , ,

5 Comments

Leave Comment
  1. Rubby Dian says:

    ini nih yg ane cari-cari, akhirnya ketemu juga artikelnya,.
    thanks gan,.

  2. wah ini yg 3 contoh terakhir gak disebutkan juga caranya :D

    • Himma says:

      Biasa kar,,,
      1. Pakai font dg warna yg lebih gelap sedikit daripada background. Kasih shadow terang di atas, kasi shadow gelap di bawah (posisi x dan y).
      2. Sama kayak nomor 1, cuma kali ini tukar posisi shadow gelap dan terangnya.
      3. Pakai minimal 3 shadow untuk efek apinya. Gunakan nilai blur yang tinggi supaya terlihat bentuknya yang lembut.
      Selamat mencoba :D

  3. Jordan says:

    hmm tolong updae yang lebih lengkap lagi dong bro. seperti teks hover dan lainnya, pasti lebih lengkap dan banyak dicari. thanks

Write Comment

Your email will not be published. The marked label is required.