Simple CSS Trik - Embossing Text CSS

Membuat efek text umumnya dilakukan pada object text gambar, baik itu menggunakan program image editor Adobe Photoshop, Adobe Illustrator maupun menggunakan software image editor lainnya. Namun pada posting kali ini saya akan mencoba membuat embossing text effect menggunakan simple css trik.

Terdapat dua opsi yang dapat digunakan untuk membuat emboss text effect, pertama efek teks timbul dan kedua efek teks tenggelam.

Pertama membuat text effect tenggelam. Ilustrasi; background text berwarna abu-abu (silver/#666), warna text hitam. Pertama buat dahulu class selector css seperti ilustrasi di bawah ini:

p.tenggelam {
 color: #000;
 text-shadow: 0px 1px 0px #999;
 font-weight:bold;
}

Untuk membuat effect text tenggelam dengan asumsi background latar berwarna abu-abu (#666), maka text yang digunakan harus lebih gelap dari warna background latar. Text Shadow (text-shadow: 0px 1px 0px #999;) harus lebih terang dari warna text dan warna background latar.

Sedikit teori:.

0px yang pertama, merupakan koordinat X (atau bisa dibilang posisi vertikal / posisi ke kanan atau ke kiri). Jika nilainya 0 maka sama artinya dengan tidak ada perpindahan posisi. Jika nilainya "+" (positif) maka posisi akan bergeser ke arah kanan, jika "-" posisi bergeser ke arah sebaliknya (bergeser ke kiri).

1px yang kedua, merupakan koordinat Y (posisi horizontal / posisi ke atas atau ke bawah). Jika nilainya positif, posisi akan bergeser ke bawah, jika negatif posisi berada pada wilayah sebaliknya.

0px yang ketiga, merupakan radius blur dari text efek yang akan dihasilkan. Nilai "0" sama artinya dengan tidak efek blur sama sekali. Semakin besar nilainya, maka akan semakin buram efek blurnya.

Penerapan pada dokumen html, seperti ilustrasi di bawah:

<div style="background-color:#666; padding:5px;">
 <p class="tenggelam">
  Ini adalah text berwarna hitam, background berwarna abu-abu dengan ditambahkan effect text bayangan berwarna abu-abu cerah
 </p>
</div>

Hasilnya akan tampak seperti contoh di bawah ini:

Ini adalah text berwarna hitam, background berwarna abu-abu dengan ditambahkan effect text bayangan berwarna abu-abu cerah

Kedua text effect timbul. Warna background latar sama, warna text biru (#09F), properti text-shadow css yang diterapkan sama seperti di atas namun warna bayangan menggunakan warna yang lebih gelap dari warna background latar maupun warna text yang digunakan (hitam / #000). Maka class selector CSS yang digunakan adalah seperti ilustrasi di bawah ini:

p.timbul {
 color:#09F;
 text-shadow: 0px 1px 0px #000;
 font-weight:bold;
}

Penerapan pada dokumen html, seperti ilustrasi di bawah:

<div style="background-color:#666; padding:5px;">
 <p class="timbul">
  Ini adalah text berwarna biru, background berwarna abu-abu dengan ditambahkan effect text bayangan berwarna hitam.
 </p>
</div>

Maka hasilnya akan tampak seperti di bawah ini:

Ini adalah text berwarna biru, background berwarna abu-abu dengan ditambahkan effect text bayangan berwarna hitam.

Nah.. Bisa kan. Silahkan bereksperimen dengan warna dan property text-shadow css menurut selera kamu masing-masing.

Selengkapnya