CSS Text Shadow Yang Lebih Realistis

Mad Trik - Mari kita bermain dengan CSS lagi. Dan kali ini kita akan membahas tentang CSS text-shadow.

Sebelumnya kalau yang gak tau sama CSS text-shadow, ini cuman sedikit yang saya tahu, text-shadow itu gunanya untuk menambahkan efek bayangan pada sebuah teks atau tulisan.

Nah, disini kita akan membuat efek bayangan yang lebih realistis dengan CSS, terinpirasi dari hasil mainannya om Chris Coyier di CodePen dan juga artikel om Taufik di blognya DTE. Realistis disini maksudnya adalah efeknya yang seperti nyata, dengan efek 3D-nya, teks yang ada seperti muncul ke permukaan gitu atau apalah itu *apa ini*.

Nah, contohnya akan seperti text diatas, bagaimana baguskan hasilnya ?. Ini bisa diterapkan dimana saja, seperti judul artikel ataupun judul blog.

Untuk membuatnya mari kita lihat bersama-sama dibawah ini:

Pertama-tama buat dulu bentuk kotaknya. Kalau yang ini sih tidak wajib, ini hanya sekedar pemanis mau diikuti juga gak apa-apa:

.text-realistis {
  background-color: rgb(0, 175, 175); <!-- Sesuaikan sendiri warnanya -->
  height: 200px;
  width: 300px;
}

Hasilnya akan seperti bentuk dibawah:

Setelah itu tambahkan sebuah text, disini saya akan menulis 'Mad Trik'.

<div class="text-realistis">MT</div>

Mad Trik

Setelah itu bagian terpenting di artikel ini, yaitu memberi efek 3D-nya atau efek realistisnya:

.text-realistis {
background: #00afaf;
color: white;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

Dan hasil akhirnya:

Mad Trik

Intinya:

.text-realistis {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

Atau bisa juga memakai cara yang dilakukan di blog DTE:

.text-realistis {
  text-shadow:
    0 1px 0px #fff, /*Level 1+*/
    0 2px 0px #ddd, /*Level 2*/
    0 3px 0px #ccc, /*Level 3*/
    0 4px 0px #bbb, /*Level 4*/
    0 5px 0px #aaa, /*Level 5*/
    0 6px 0px #999, /*Level 6*/
    0 7px 0px #888, /*Level 7*/
    0 8px 0px #777, /*Level 8*/
    0 9px 0px #666, /*Level 9*/
    0 10px 0px #555, /*Level 10*/
    0 11px 5px rgba(0, 0, 0, 0.4), /*Bayangan Hitam untuk Sentuhan Akhir*/
    0 15px 15px rgba(0, 0, 0, 0.4) /*Bayangan Hitam untuk Sentuhan Akhir*/;
}

Mad Trik

Dan itulah artikel tentang CSS text shadow relistis kali ini, selanjutnya mungkin masih ada artikel tentang text shadow lainnya, jadi tunggu saja disini sampai artikel selanjutnya.