Cara Membuat Bayangan pada Teks dengan Effect Text-Shadow

Cara Membuat Bayangan pada Teks dengan Effect Text-Shadow

Pada kesempatan kali ini saya akan membagikan cara membuat bayangan pada teks dengan menggunakan CSS, lebih tepatnya dengan effect text-shadow.

Namun dalam beberapa hal, ada syarat yang harus di lakukan agar efek text-shadow ini muncul secara maksimal. Adapun syarat yang harus di lakukan adalah dengan menggunakan browser dengan versi yang tertera pada tabel di caniuse.com.

Bagi anda yang tidak memiliki browser dengan versi yang tertera di caniuse.com, silahkan mendownloadnya terlebih dahulu.

Efek text-shadow ini juga sudah saya terapkan di template yang saya desain, yaitu template Tutor Magazine 3D v1.0. Bagi yang ingin mencoba atau membeli template ini silahkan masuk ke halaman ini.

(Baca juga : Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit)

Bagi anda yang ingin menggunakan efek text-shadow ini di template blog anda silahkan ikuti langkah-langkah dari saya di bawah ini. Namun jika anda hanya ingin mengetahui cara menerapkannya saja, lewati saja langkah pertamanya.

Cara Membuat Bayangan pada Teks dengan Effect Text-Shadow pada CSS

1. Cara Membuat Bayangan pada Teks di Template Blogger

• Buka halaman blog anda, disarankan menggunakan browser Google Chrome
• Klik kanan pada teks yang ingin di tambahkan, pilih Inspeksi. Atau langsung klik Ctrl+Shift+I pada keyboard, kemudian klik Ctrl+Shift+C, lalu klik kiri pada teks yang di pilih
  
• Perhatikan kolom kanan pada browser, kemudian copy dan cari element.style tersebut
• Langkah selanjutnya masuk ke akun blogger anda
• Pilih menu Tema, pilih Edit HTML
• Kemudian cari elemen yang di copy tadi

(Baca juga : Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS)

2. Cara Memasukan Efek Text-shadow ke dalam Elemen CSS

• Sebelum memasukan kode CSS text-shadow ini adalah penutup di setiap baris CSS di dalam elemen, yaitu adalah titik koma seperti ini ;
• Catatan : Jika tidak ada titik koma, tambahkan saja di belakangnya.
• Kemudian masukan kode berikut ini tepat setelah ;, contoh penerapannya adalah sebagai berikut.

#sidebar-wrapper h2, #sidebar-wrapper h3, #sidebar-wrapper h4 {
    background: #1194f2;
    font-size: 16px !important;
    min-width: 40px;
    display: inline-block;
    font-weight: bold;
    padding: 2px 15px;
    margin: 5px 0 0;
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.51);
}

• Pengaturan :
• 2px (Merah) = Digunakan untuk mengatur jarak ke kiri dan ke kanan bayangan, semakin besar angka, maka bayangan semakin ke kanan, dan juga sebaliknya
• 2px (Kuning) = Digunakan untuk mengatur jarak ke atas dan ke bawah bayangan, semakin besar angka, maka bayangan semakin ke bawah, dan juga sebaliknya
• 2px (Hijau) = digunakan untuk mengatur efek blur dari bayangan, semakin besar angka maka bayangan akan semakin blur, dan juga sebaliknya
• rgba(0, 0, 0, 0.51) = Digunakan untuk mengatur warna bayangan, silahkan atur warna sesuai keinginan.
• ; = Penutup baris.

(Baca juga : Cara Membuat Prism Syntax Highlighter untuk Menampilkan Script Code di Blogger)

Itulah tutorial dari saya mengenai cara membuat bayangan pada teks dengan effect text-shadow. Jika ada pertanyaan mengenai cara menambahkan efek text-shadow ini, silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya mengenai kode CSS ataupun tentang pemrograman yang lainnya, silahkan tetap kunjungi blog Tutorial Umum.

Share this