Tutorial Belajar CSS3: Cara Membuat Efek Teks Berbayang dengan CSS3

Posted on

CSS3 membawa banyak property baru untuk mempercantik tampilan halaman blog, salah satunya property text-shadow yang digunakan untuk menampilkan efek teks berbayang. Di panduan belajar CSS3 Duniailkom kali ini saya akan membahas cara penggunaannya.


Cara Membangun Efek Teks Berbayang dengan CSS

Sesuai dengan namanya, property text-shadow yaitu modul baru di di CSS3 yang berfungsi untuk menghasilkan teks berbayang (text shadow).

Seketika saja kita masuk ke contoh kode HTML dan CSSnya:

Terlihat teks judul <h1> mempunyai bayangan yang berada sedikit ke kanan dan kearah bawah. Penulisan property text-shadow: 2px 2px artinya: saya ingin membangun bayangan di arah 2 pixel ke kanan, dan 2 pixel ke bawah.

Bagaimana jikalau saya ingin bayangan ini berada di arah atas dan kiri? Tinggal menggunakan nilai negatif, seperti berikut:

Kali ini bayangan berada di 10 pixel ke kiri, dan 15 ke arah atas.


Cara Menambahkan Efek Blur di Bayangan Teks

Selain mengatur posisi bayangan, kita pun dapat mengatur seberapa ‘kabur’ bayangan yang diraih. Caranya dengan menambahkan nilai blur, seperti berikut:

Nilai 5px dari penulisan text-shadow: 10px -15px 5px yaitu nilai blur yang ingin ditambahkan. Semakin tinggi nilainya, semakin ‘kabur’ bayangan yang diraih


Cara Mengubah Warna Bayangan Teks

Secara default, bayangan teks berwarna sama dengan teks itu sendiri. Di contoh sebelumnya teks saya berwarna hitam, sehingga bayangannya pun berwarna hitam. Bagaimana cara menukar warna ini?

Kita dapat menambahkan 1 lagi nilai kepada property text-shadow, seketika saja masuk ke contohnya:

Dapat kamu lihat kini setiap teks mempunyai warna bayangan yang berbeda-beda. Dengan menukar nilai warna, kita dapat memperoleh efek bayangan yang mempesona.

Di modul text-shadow CSS3, kita pun dapat menambahkan 2, 3 atau lebih efek bayangan di teks yang sama. Lebih jauh mengenai hal ini saya bahas di eBook CSS Uncover Duniailkom.


eBook CSS Uncover Duniailkom

Sekiranya kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web mempunyai tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/