Cara Membuat CSS 3D Text

Oke, kali ini saya akan sedikit memberi tutorial bagaimana cara membuat 3D Text yang hanya dengan menggunakan CSS. Teks ini diberi efek dengan efek shadow yang ditumpuk menjadi beberapa lapis sehingga dapat memunculkan efek seperti 3D. Caranya ubah CSS kalian menjadi seperti ini:

@font-face {

   font-weight: normal;

    font-style: normal;

}

 

.fontface {

    font-size:140px;

    line-height:30px;

    font-family: Arial, sans-serif;

    font-weight:normal;

    letter-spacing:5px;

    color:#fff;

    text-align:center;

   /* Property text-shadow ditumpuk menjadi beberapa bagian, pada lapisan terakhir text-shadow di beri nilai blur

       radii agar terlihat lebih real */

    text-shadow:

        1px 1px #CCC,

        2px 2px #CCC,

        3px 3px #444,

        4px 4px #444,

        5px 5px #444,

        6px 6px #444,

        7px 7px #ccc,

        6px 6px 15px rgba(0, 0, 0, 0.6);

}




Setelah itu terapkan CSS tersebut ke dalam markupnya:

Misal:

<h1 class="fontface">3D CSS TEXT</h1>

<h2 class="fontface">WITH TEXT-SHADOW</h2>

nanti akan menjadi teks berefek 3D :D

selamat mencoba..