Membuat Text 3D Dengan CSS

CSS jaman sekarang memang semakin kompleks, dari mulai memberi efek shadow / bayangan pada text sekarang pun kita bisa membuat text 3d dengan mudah hanya dengan CSS (Cascading Style Sheets). Yakni dengan metode memberikan efek shadow alias bayangan berlapis-lapis di bawah text sehingga text yang kita buat tersebut menjadi 3d. Penasaran bagaimana cara membuatnya? Simak cara membuat text 3d hanya dengan CSS berikut ini.

Oke pertama kita buat tulisan/text yang akan kita buat 3d dalam bahasa html dengan id atau class tertentu, contoh :

<h2 class="inset"> saktyambara.blogspot.com <strong style="color:#CC0000">tutorial</strong> membuat text 3d dengan CSS </h2>

Selanjutnya kita buat class inset text diatas dengan kode css berikut :

.inset { font-size: 33px;    
         color: #0099FF;    
         text-shadow: 
           0 1px 0 #bbb,
           0 2px 0 #bbb,
           0 3px 0 #aaa,
           0 4px 0 #aaa,
           0 5px 0 #999,
           0 6px 1px #000,
           0 0px 3px #000,
           0 1px 3px #000,
           0 3px 5px #000,
           0 5px 10px #000,
           0 5px 20px #000;}

Jadi deh tuh text html diberi class pada css-nya. Pada dasarnya membuat text 3d dengan CSS ini sebenarnya kita membuat beberapa lapis shadow pada suatu text sehingga text tersebut terlihat 3 dimensi.

Nah berikut penjelasan struktur format css-nya :

.inset  {   text-shadow: [X-offset] [Y-offset] [Blur size] [Colour];  }

keterangan :
.inset : Nama class
X-offset : Jarak horizontal shadow dari text
Y-offset : Jarak vertical dari text
Blur size : Jarak ketebalan efek blur dari shadow itu sendiri
colour : Warna dari shadow text yang anda inginkan, anda bisa memakai rgb atau memakai kode hex colour

Sehingga kalau diterapin css-nya sbb:

text-shadow: 0 1px 0 #bbb,
             0 2px 0 #bbb,
             0 3px 0 #aaa,
             0 4px 0 #aaa,
             0 5px 0 #999,
             0 6px 1px #000,
             0 0px 3px #000,
             0 1px 3px #000,
             0 3px 5px #000,
             0 5px 10px #000,
             0 5px 20px #000;

Buruan dicoba supaya lebih paham, membuat teks 3d dengan bantuan css ini kelebihannya dibanding dengan 3d text berupa image/gambar adalah teks bisa di blok dengan cursor sehingga terbaca oleh search engine, dengan demikian bisa lebih SEO friendly tentunya.

Incoming keyword google search terms dari postingan Membuat Text 3D dengan CSS :

membuat symbol text 3d dengan CSS , cara membuat tulisan 3 dimensi dengan css , membuat teks 3d dengan bantuan css , langkah membuat text 3d ala css , tutorial membuat 3d teks dengan css , membuat text menjadi 3d dengan css, membuat efek 3d pada css, kelebihan membuat tulisan 3d dengan css, membuat bayangan tampak 3d dengan css, tulisan 3d menggunakan css, mempercantik teks nampak 3d dengan css, menambahkan bayangan 3d pada text dengan css, teks 3dimensi dengan css, efek shadow 3d text css, efek bayangan 3d dengan css, tulisan 3d hanya dengan css, membuat efek bayangan menumpuk tampak 3 dimensi pada text dengan css