Memberi Efek Bayangan (Shadow Effect) Pada Sebuah Tulisan

Hampir setiap blogger tentu ingin menampilkan blognya lebih menawan dan menarik hati. Banyak cara yang dilakukan, baik dengan mendesain ulang template yang sudah ada atau dengan mambahkan berbagai atribut ke dalam blognya. Tentu hal itu sah-sah saja. Bahkan salah satu upaya untuk menaikkan traffics adalah dengan membuat blog kita tampil menarik, ciamik dan penuh daya tarik, sehingga membuat pengunjung merasa betah calik (duduk) sambil lurak-lirik pada artikel-artikel yang terpampang di bilik.

Salah satu untuk membuat tampilan blog kita lebih menarik adalah dengan memberikan efek bayangan (shadow effect) pada sebuah tulisan seperti pada SC Community yang full shadow, hehehe... Mau tahu caranya? Sebenarnya gampang saja untuk memberi efek bayangan pada tulisan ini. Kamu bisa mempelajarinya berikut ini:

Memberi efek bayangan pada posting

Untuk memberikan efek bayangan pada tulisan posting, kamu bisa menambahkan perintah berikut:

<span style="text-shadow:2px 2px 2px #333;">Tulisan berefek bayangan</span>

Atau bisa juga dengan menggunakan perintah div seperti ini:

<div style="text-shadow:2px 2px 2px #333;">Tulisan berefek bayangan</div>

Kamu dapat mengubah ukuran bayangan dan warna bayangan disesuaikan dengan background template blog kamu. Pada perintah di atas, ukurannya bayangannya adalah 2 pixel (atas=2px, kanan=2px, bawah=2px. Mengikuti arah putaran jarum jam seperti pada margin dan padding), dan warna bayangannya adalah abu gelap (#333).

Memberi efek bayangan pada template

Untuk memberikan efek bayangan pada template, tergantung kamu mau menempatkannya dimana. Jika mau memberi efek bayangan pada judul blog, cari kode CSS untuk perintah header, biasanya ditambahkan h1 (judul blog) dan h2 (deskripsi blog). Misalnya seperti ini:

.header h1 {
font-size:40px;
padding:0;
margin:0 0 0 20px;
font-weight:bold;
text-align:left;
color:#eef2d5;
text-shadow: 2px 2px 2px #333; (tambahan perintah efek bayangan)
}

Jika kamu mau memberi efek bayangan pada judul posting, cari kode CSS untuk post, biasanya ditambahkan h3. Misalnya seperti ini:

.post h3 {
margin:0;
padding: 5px 0px 5px 10px;
text-align: left;
font-size:20px;
font-weight:normal;
overflow:hidden;
text-shadow: 2px 2px 2px #333; (tambahan perintah efek bayangan)
}

Demikian juga jika kamu mau memberi efek bayangan pada judul sidebar, carilah kode CSS untuk sidebar.

Sayangnya, setiap template berbeda-beda dalam memberikan istilah untuk judul blog, deskripsi blog, judul posting, dan judul sidebar tersebut. Ada juga yang memberikan nama judul blog dengan blogname1, deskripsi blog dengan blogname2, judul posting dengan posttitle, dan sidebar dengan widget. Untuk itu kamu harus sedikit teliti dalam mencarinya.

Nah, segitu aja brow, selamat mencoba....