CARA MEMBUAT EFEK 3D TEXT DI BLOG CARA MEMBUAT EFEK 3D TEXT DI BLOG

CARA MEMBUAT EFEK 3D TEXT DI BLOG -  Berikut ini tutorial cara membuat efek text 3D dengan menggunakan kode css yang sederhana. Hasil dari tampilan efek 3D text ini cocok diterapkan/ dipakai sebagai header H1, H2, H3, dan H4 sehingga tampilan dari blog kamu menjadi lebih cantik dan menarik.

Pada dasarnya kode css ini menggunakan text-shadow sebagai kode utamanya dan transition sebagai  tambahan animasinya.
 TUTORIAL CARA MEMBUAT TEXT 3D DENGAN CSS
Untuk cara pemasangannya ikuti langkah berikut ini
1. Log in ke dashboard > Template > Edit HTML > Proceed
2. Kamu bisa langsung memasang kode css efek 3D text diatas dengan menambahkan isi yang ada dalam { }, pada kode h1, h2 yang sudah ada. atau mengganti div style yang akan diganti tanpilan h1, h2nya dengan merubah .keren sesuai dengan div tersebut. Misalkan saja #header
3. Lalu save, apa bila tampilan berubah menjadi aneh tidak sesuai dengan yang diharapkan berarti style tersebut masih bentrok dengan template bawaan aslinya. Kamu tinggal oprek2 aja sendiri hingga tampilan sesuai dengan yang diharapkan.
4. Untuk memodif warna tampilan silahkan kamu lihat pola kode css diatas yang udah saya beri tanda warna, ikuti polanya dan ganti warnanya, untuk margin dan padding bisa menyesuaikan.tambahan animasinya. Langsung saja berikut ini script efek 3D text

Langsung saja berikut ini script efek 3D text


    

   .keren h1 { color: white; font: bold 52px Helvetica, Arial, Sans-Serif;
text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;

-webkit-transition: all 0.12s ease-out;

-moz-transition: all 0.12s ease-out;

-ms-transition: all 0.12s ease-out;

-o-transition: all 0.12s ease-out;

}

.keren h1:hover {

position: relative; top: -3px; left: -3px; 

text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;

}

.keren h2 { color: white; font: bold 34px Helvetica, Arial, Sans-Serif;

text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe;

-webkit-transition: all 0.12s ease-out;

-moz-transition: all 0.12s ease-out;

-o-transition: all 0.12s ease-out;

}

.keren h2:hover {

text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe, 4px 4px #02a2fe, 5px 5px #02a2fe, 6px 6px #02a2fe;

}

.keren h3 { color: white; font: bold 42px Helvetica, Arial, Sans-Serif;

text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;

-webkit-transition: all 0.12s ease-out;

-moz-transition: all 0.12s ease-out;

-o-transition: all 0.12s ease-out;

}

.keren h3:hover {

position: relative; top: -3px; left: -3px; 

text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;

}

.keren h4 { color: white; font: bold 24px Helvetica, Arial, Sans-Serif;

text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe;

-webkit-transition: all 0.12s ease-out;

-moz-transition: all 0.12s ease-out;

-o-transition: all 0.12s ease-out;

}

h4:hover {

text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe, 4px 4px #02a2fe, 5px 5px #02a2fe, 6px 6px #02a2fe;

}

Selamat mencoba