Penyempurnaan CSS Efek Teks Tiga Dimensi

Tabel Konten
  1. Mamas Topik Paling Ganteng 
  2. Mamas Topik Paling Ganteng 

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:

Mamas Topik Paling Ganteng 

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:

Mamas Topik Paling Ganteng 

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:

CSS teks 3 dimensi
Level Warna pada CSS Text-Shadow

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 :)

Komentar telah ditutup.