Hay friends, Dengerin lagu yuks
Hehehehe ..
Andyrra

Male, 45 years

Batam, Indonesia

If you're doing your best, you won't have any time to worry about failure and The past can't see you, but the future is listening.

andyrra.com

Translate

Java Filipino Czech English iran Romania Thailand Bangladesh India India French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

poto

Mounting created Bloggif

28 Mei 2013

CARA MEMBUAT EFEK 3D TEXT DI BLOG

cara membuat efek 3D textCARA 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

Get free daily email updates!

Follow us!



Share to Facebook Share this post on twitter Bookmark Delicious Digg This Stumbleupon Reddit Yahoo Bookmark Furl-Diigo Google Bookmark Technorati Newsvine Tips Triks Blogger, Tutorial SEO, Info

0   komentar

Cancel Reply

Led


copas gif

loading

SOCIAL NETWORK

email  
   
 
google plusGoogle+
 
  youtube 
 
andyrra.com

VISITOR FROM

andyrra.com

RECENT POST



>

Enter your email address:



what is my ip address?