Membuat Drop Shadow Text dengan CSS

Membuat Drop Shadow Text dengan CSS

Tanpa menggunakan grafik, kita bisa manfaatkan function dari CSS untuk membuat efek dropshadow.

CSS:
.dropshadow { position:relative; display:block; color: #ff6600; font-family: "Georgia"; }
.dropshadow span { position:absolute; display:block; top:0px; }
.dropshadow:before { display:block; padding: 1px; content: attr(title); color: #000; }

HTML:

<h1 class="dropshadow" title="DROP SHADOW">
<span>DROP SHADOW</span>
</h1>

RESULT:
dropshadow

notes: not for IE 🙂

BOC Banner
dongkrak

4 Comments

  • Gus Dwi says:
    July 22, 2009 at 4:26 pm

    Wahhh, baru aq coba pada website ku…. jadi BAGUS lho. nggak percaya… coba aja dilihat
    Thanks ya

  • viar says:
    March 19, 2009 at 11:48 am

    @arif: hyuk mari!

    @Hendra: IE bisa juga, pake “text-shadow”. tp emang perlu pensiun itu browser, nyiksa sih 😛

  • Hendra W Saputro says:
    March 18, 2009 at 6:46 pm

    Huehuehue. Aku perhatikan ada note nya: NOT FOR INTERNET EXPLORER. Duh, memang saatnya di pensiunkan kek nya yak.

  • Arif Nofiyanto says:
    March 18, 2009 at 6:21 pm

    idenya keren aku mau contek ah…thanks yo!! 🙂

Leave A Response

Promo Hosting

Promo 3 Tahunan Web Hosting

Mendapatkan 3 tahun kontrak web hosting hanya dengan bayar harga setahun, gratis domain name hingga beri cashback ke pelanggan. Stock sangat terbatas dan bilamana tercukupi maka promo akan kami akhiri. Segera klaim paket web hosting 3 tahunan nya di halaman Promo Hosting 3Tahunan.

Web Hosting Cpanel
Web Hosting LiteSpeed
Web Hosting CloudLinux
Web Hosting PHP
Web Hosting Linux