Penyempurnaan CSS Efek Teks Tiga Dimensi

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