Penyempurnaan CSS Efek Teks Tiga Dimensi
Tabel Konten
Seperti yang telah Saya jelaskan dalam artikel singkat Apa Saja yang Bisa Kita Lakukan dengan CSS Text Shadow, di situ terdapat sebuah contoh efek teks tiga dimensi dengan modal CSS Text Shadow seperti ini:
h3 {
color:#ebbe89;
text-shadow:
1px 1px 0 #da8d3e,
2px 2px 0 #da8d3e,
3px 3px 0 #da8d3e,
4px 4px 0 #da8d3e,
5px 5px 0 #da8d3e,
6px 6px 0 #da8d3e,
6px 6px 15px #000; /*Bayangan Hitam untuk Sentuhan Akhir*/
}
Namun hasil tampilan di atas tampaknya kurang sempurna dan tidak alami. Hal ini terjadi karena di sini kita hanya memakai dua level warna teks saja:
(Buat level-level warnamu sendiri di sini). Untuk menciptakan efek teks tiga dimensi dengan hasil tampilan yang lebih alami, setidaknya kamu harus menerapkan tiga level warna teks: level 1 digunakan untuk warna teks dasar, level 2 digunakan untuk warna sisi horizontal (offset-X), dan level 3 digunakan untuk warna sisi vertikal (offset-Y) seperti ini:
h3 {
color:#ebbe89; /*Level 1*/
text-shadow:
1px 0px 1px #da8d3e, /*Level 2*/
0px 1px 1px #6d4d18, /*Level 3*/
2px 1px 1px #da8d3e, /*Level 2*/
1px 2px 1px #6d4d18, /*Level 3*/
3px 2px 1px #da8d3e, /*Level 2*/
2px 3px 1px #6d4d18, /*Level 3*/
4px 3px 1px #da8d3e, /*Level 2*/
3px 4px 1px #6d4d18, /*Level 3*/
5px 4px 1px #da8d3e, /*Level 2*/
4px 5px 1px #6d4d18, /*Level 3*/
6px 5px 1px #da8d3e, /*Level 2*/
5px 6px 1px #6d4d18, /*Level 3*/
7px 6px 1px #da8d3e, /*Level 2*/
6px 7px 1px #6d4d18, /*Level 3*/
7px 6px 7px #000; /*Bayangan Hitam untuk Sentuhan Akhir*/
}
Dalam kode di atas bisa kamu lihat bahwa nilai offset diatur berselingan secara bergantian pada masing-masing tingkatan offset, hal ini untuk memastikan bahwa masing-masing warna bayangan (level 2 dan 3) akan terlihat satu per satu:

3 Komentar
Admin
bikin berat tapi :(
Taufik Nurrohman
@eko tri: Berat loadnya apa berat mikirnya hehe...
Unknown
Mantap, gan. Memang untuk membentuk teks 3 dimensi, kita mesti mengurutkan pula level pewarnaan. Tapi kalau yang seperti ini dibagi level pewarnaan pada ordinat tertentu (X dan Y), saya baru dapat ilmunya di sini. Terima kasih, gan :)