0 Contoh Script Efek ‘Text-Shadow’ Dengan CSS3

Dengan penggunaan CSS3 kita bisa mendisain blog dengan cara yang lebih mudah & sederhana tanpa harus menggunakan ‘javascript’ maupun ‘image’. Setidaknya ada beberapa cara membuat ‘text-shadow’ yang saya dapatkan dari beberapa sumber.

Properti dari ‘text-shadow’ adalah menambahkan satu atau lebih bayangan untuk teks. Ini termasuk ke dalam modul teks CSS3.
Peramban yang mendukung

    * Opera 9.5+
    * Firefox 3.5+
    * Safari 1.0+
    * Google Chrome

- Efek berbayang (‘glow’) & ekstra glow

Kode CSS :

.glow {
color:#FFFFFF ;
text-shadow:0 0 20px yellow ;
}

Cobalah bereksperimen … mengubah nilai radius untuk mendapatkan efek yang berbeda.

kode CSS untuk ekstra ‘glow’ :

.extraGlow {
color:white;
text-shadow:0 0 30px yellow , 0 0 70px yellow ;
}
 

- Apple style

Sangat mudah diterapkan, itu sebabnya saya sangat menyukai CSS3…he..he..he..

.applestyle{
background:#666
color: #000;
text-shadow: 0px 1px 1px #fff;
}

- Photoshop Emboss (Timbul)

.Emboss {
background:#ccc ;
color:#ccc;
text-shadow: -1px -1px white, 1px 1px #333;
}


Disini menggunakan beberapa bayangan untuk mencapai efek yang satu ke atas/kanan lain ke bawah/kiri. Kelemahannya adalah bahwa jika peramban tidak mendukung text-shadow (Ya, kita tahu kira-kira peramban mana yang tidak mendukung !:? ) maka teks yang dibuat tidak bisa terbaca dengan baik.
Photoshop Pillow emboss

- Photoshop Pillow emboss

.PillowEmboss {
background:#ccc;
color:#ddd;
text-shadow: 1px 1px white,
-1px -1px #444;
}

- Efek Kabur (‘blurry’)

Saya menemukan ini di Website Simurai. Yang merupakan trik untuk membuat warna teks transparan & menambahkan bayangan kabur untuk mencapai efek kabur pada teks.

.blurytext {
color: transparent;
text-shadow: #fff 0 0 10px;
}

- Efek Teks 3D

Saya suka ini .. Trik ini ditemukan pada Css-trick. Dan saya lihat benar-benar keren. Dengan menambahkan beberapa bayangan dengan warna yang sama kita dapat mencapai apa yang tampak seperti teks 3D.

.effect3D {
color:rgba(255,255,0,.7) ;
font-weight: bold;
text-shadow: 1px 1px rgba(255,128,0,.7),
2px 2px rgba(255,128,0,.7),
3px 3px rgba(255,128,0,.7),
4px 4px rgba(255,128,0,.7),
5px 5px rgba(255,128,0,.7);
}


Saya menambahkan 5 bayangan tetapi cobalah bereksperimen & berkreasi.