BIKIN EFEK TULISAN TIMBUL

Tips triks CSS berikut ini sebenarnya adalah akal-akalan dari postingan sebelumnya tentang bikin efek shadow pada teks. Tidak ada kode tambahan untuk membentuk efek timbul pada tulisan. KodeCSS yang digunakan tetap sama dengan kode untuk membentuk efek shadow pada teks.

Coba perhatikan tulisan berikut:

TULISAN TIMBUL

Itu adalah teks dengan efek shadow. Lalu kenapa tampak seperti timbul pada post ini? Rahasianya adalah warna tulisan itu sendiri. Beri warna teks dengan warna yang sama dengan background tempat teks itu diletakkan. Jika warna background-nya putih, maka warna teks juga harus putih, lalu beri efek shadow pada teks. Maka jadilah teks itu seperti timbul dari background-nya.

Demikian tips singkat ini, selamat mencoba dan moga ada manfaatnya!

Read more »

BIKIN EFEK SHADOW PADA TEKS

Mumpung masih ingat tentang penggunaan CSS, kali ini saya ingin berbagi seputar efek lagi. Jika pada post sebelumnya tentang efek sahadow pada template blog, maka pada post ini adalah bikin efek shadow pada text sebuah blog.

Perhatikan tulisan berikut:

I LOVE YOU FULL

Lihat kode yang membentuk tulisan diatas:

<div style="font-family:Helvetica; text-align: center;">
<span style="font-size: 50px; text-shadow: 2px 2px 7px #fe04d8;"><b>I LOVE YOU FULL</b></span></div>

Dan kode yang membentuk shadow atau bayangan pada tulisan diatas adalah:

text-shadow: 2px 2px 7px #fe04d8;

Keterangan kode:

• 2px 2px 7px = Besaran shadow atas, kanan dan bawah pada teks
• #fe04d8 = Kode warna shadow

Kamu bisa mempersonalisasi tampilan shadow pada teks dengan merubah value kode text-shadow diatas sesuai dengan keinginan kamu. Lalu, bagaimana menempatkan kode text-shadow ini pada template blog, seperti pada judul post, header atau judul sidebar? Silahkan bereksplorasi sendiri dulu. Semoga kedepannya saya bisa mem-posting cara penempatannya pada template blog...

Demikian, moga bermanfaat!

Read more »

EFEK SHADOW PADA TEMPLATE BLOG

Alhamdulillah, akhirnya bisa bikin post lagi untuk blog tercinta ini. Semoga kesehatan dan mood-ku semakin membaik kedepannya setelah "dihisap" dan dipompa semangatnya oleh "sesuatu"...hehe. Dan tanpa berlama-lama lagi, disini saya akan share sedikit tips dan triks untuk membuat ekek shadow pada template blog kita.

Ini adalah tips sederhana namun cukup memberikan nuansa baru pada template blog kita. Cara pembuatannya-pun tidak njelimet karena hanya dibikin dengan CSS [Cascading Style Sheet] yang tentunya tidak bikin loading blog jadi agak berat seperti yang dilakukan oleh JavaScript.

Coba perhatikan kode CS berikut:

-webkit-box-shadow: #ccc 0 2px 15px;
-moz-box-shadow: #ccc 0 2px 10px;

Itulah sederet kode yang saya letakkan pada template blog Iskaruji dot com ini. Juga pada ads popups anti block browser.

Pada template tersebut terdapat kode #ccc yang merupakan kode warna shadow [bayangan]. Kamu bisa merubahnya sesuai dengan warna shadow yang kamu inginkan. Juga kamu bisa meletakkanya dimana saja sesuai keinginan kamu. Contohnya, seperti yang saya letakkan pada blog Social Culture ini [Lihat screenshot],

yang saya letakkan pada main wrapper untuk memberi efek shadow pada halaman utama blog.

Demikian, moga bermanfaat!

Read more »