Kali ini saya mencoba membuat efek text 3 dimensi hanya dengan menggunakan CSS. Efek ini dapat dilihat pada browser browser modern seperti firefox, google chrome dan safari yang sudah mendukung CSS3. Efek ini menggunakan property text-shadow yang ditumpuk menjadi beberapa tumpukan dan terlihat seperti 3 dimensi ( 3 dimensi disini bukan anaglyph tapi bentuk geometri-nya yang 3D ).

Markup

Disini saya akan mencoba menggunakan text-shadow pada tag h1 dan h2.

<h1 class="fontface">3D CSS TEXT</h1>
<h2 class="fontface">WITH TEXT-SHADOW</h2>

CSS

Saya menggunakan font Bebas Neue yang dapat di unduh di website fontsquirel

/* Ini css yang di generate oleh fontsquirel pada saat mengunduh font */
@font-face {
	font-family: 'BebasNeueRegular';
	src: url('BebasNeue-webfont.eot');
	src: local('☺'), url('BebasNeue-webfont.woff') format('woff'), url('BebasNeue-webfont.ttf') format('truetype'), url('BebasNeue-webfont.svg#webfontf0WP9KEe') format('svg');
	font-weight: normal;
	font-style: normal;
}

.fontface {
    font-size:140px;
    line-height:30px;
    font-family:'BebasNeueRegular', 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);
}

Yap codingnya sudah selesai dan hasilnya dapat dilihat pada demo file yang telah saya sediakan.

---

Posted by Arif Widipratomo - http://arifwidi.co.vu/