Membuat Text Effect Dengan CSS

Mumpung lagi semangat bikin tutorial nih, sekalian saja sekarang saya lanjutkan tutorial singkat CSS-nya. kali ini kita akan belajar membuat text effect sederhana dengan CSS. text effect yang akan kita coba adalah text shadow, dengan menambahkan properti text-shadow pada selector, maka text yang terpilih akan ditambahkan efek berupa bayang2 di bagian belakangnya.

Simple Shadow Effect

Untuk tutorial pertama kita akan membuat efek bayangan sederhana, anggap saja text yang ingin kita beri bayangan adalah text “Hielmy Zaenun Nafsi” dengan format h1, bayangan yang diinginkan berupa bayangan sebesar 2 pixel ke kanan bawah berwarna abu-abu. caranya cukup menambahkan kode CSS sebagai berikut:

1
2
3

h1 {
text-shadow: 2px 2px grey;
}

Angka 2px pertama merupakan pergeseran bayangan sebanyak 2 pixel ke kanan, jika ingin bergeser ke kiri anda tinggal memasukan angka negatif, misal -2px. sedangkan 2px kedua menunjukan pergeseran 2 pixel kebawah, jika ingin merubah arahnya tinggal tambahkan angka negatif juga. grey sendiri adalah keterangan warna bayangan, warna bayangan bisa ditulis dengan nama warna seperti grey, blue, red, dll. atau dengan kode hex misal #a3a3a3. Intinya format penulisannya seperti ini {text-shadow: (koordinat-X) (koordinat-Y) (radius blur) (warna)}. Ketika dirender di browser maka hasilnya akan seperti berikut:

Neon Light Effect

Dengan sedikit variasi, shadow effect bisa dikreasikan menjadi efek lain, misal efek lampu neon pada text. contohnya seperti berikut:

Untuk membuat efek seperti itu, cukup membuat kode CSS sebagai berikut:

1
2
3

h1 {
text-shadow: 0px 0px 7px #FF0000;
}

untuk membuat efek lampu neon, bayangan harus berada sejajar dengan text utama, oleh karena itu kedua angka pertama biarkan dalam posisi 0px, kemudian untuk angka ketiga yaitu 7px merupakan angka tingkat kekaburan bayangan (blur radius). kode #FF0000 adalah kode hex untuk warna merah.

Emboss Effect

Efek ketiga yang akan kita coba adalah efek emboss atau seperti huruf timbul. namun untuk menerapkan efek ini, kita harus bermain dengan 3 unsur yaitu warna huruf, bayangan dan latar belakang. ketiga bagian tersebut harus disesuaikan warnanya agar tercipta efek emboss yang diinginkan. contoh efek emboss pada huruf sebagai berikut:

Untuk membuat efek seperti diatas, buatlah kode CSS seperti berikut:

1
2
3
4
5
6
7

body {
background: #ccc;
}
h1 {
color:#ccc;
text-shadow: -1px -1px #fffff, 1px 1px #333;
}

karena harus menyesuaikan dengan warna background juga maka warna pada body ataupun bagian lain yang menjadi tempat text itu berada harus ditentukan pula warnanya, pada contoh ini warna background pada body adalah #ccc, kemudian warna text h1 pun harus disamakan yaitu #ccc, nah sekarang agar efek timbul itu bisa tercipta dibutuhkan dua buah bayangan, oleh karena itu pada properties text-shadow diatas, value untuk shadow dibuat dua buah yang dipisahkan dengan tanda koma, keduanya mengarah ke arah yang berbeda, yang satu di set -1px -1px dengan warna #ffffff (putih), sedangkan yang satu 1px 1px dengan warna #333, dengan kombinasi tersebut maka akan tercipta efek emboss atau text timbul.

Shadow effect ini mulai diimplementasikan pada CSS3, oleh karena itu, efek ini hanya akan bisa ditampilkan dengan baik oleh browser yang mendukung CSS3 secara penuh, apabila anda membukanya dengan browser yang sudah “uzur” kemungkinan besar tampilannya akan berantakan.

Akhir kata, semoga tutorial ini bisa bermanfaat bagi anda, mohon maaf kalau banyak kekurangan, namanya juga masih belajar

Selamat Mencoba…

Tulisan lain yang mungkin berkaitan:

• Chat Facebook dengan XMPP/Jabber Client
• Membalas komentar Facebook melalui Email
• Membuat Rounded Box dengan CSS
• Facebook Photo Tagging Abuser