Jumat, 07 Juni 2013

Membuat Text 3D (Teks 3 Dimensi) Menggunakan CSS3

Membuat Text 3D (Teks 3 Dimensi) Menggunakan CSS3 - Pada awal-awal melakukan blogging, saya berusaha untuk tidak menggunakan gambar sebagai latar belakang blog atau menggunakannya di beberapa bagian element template. Seperti pada artikel kali ini, saya akan membuat text 3D atau teks 3 Dimensi yang akan dipasang ke dalam blog dengan menggunakan kode CSS3

Kenapa saya mengurangi penggunaan image sebagai latar belakang blog? Karena image tidak SEO Friendly dan membuat loading blog lama. Lalu bagaimana dengan Text 3D? Teks 3 Dimensi yang akan dipasang kedalam blog? Meski memiliki tampilan yang sama dengan sebuah image, teks 3 dimensi menggunakan CSS3 tentu lebih baik

Berikut contoh text 3D (teks 3 Dimensi) menggunakan CSS3
contoh dengan gambar
Text 3D (Teks 3 Dimensi) Menggunakan CSS3

contoh demo dengan teks
Panduan Template Blog

Dari contoh dan demo diatas, apa yang anda bayangkan? Menarik? Tentu saja dan untuk membuat Text 3D (Teks 3 Dimensi) Menggunakan CSS3 sangatlah mudah, berikut caranya;
  1. Buka akun Blogger anda
  2. Buka menu Template >> Edit Html
  3. Pasang kode CSS berikut sebelum ]]></b:skin>
    
    text3D {font-size: 75px;font-family:verdana;color:#fff;
    -webkit-transition: all .7s ease-out; 
    -moz-transition: all .7s ease-out; 
    -o-transition: all .7s ease-out; 
    transition: all .7s ease-out;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);}
    
  4. Buatlah teks dengan html  <text3D>Panduan Template Blog</text3D>
  5. Teks html bisa dipasang dimanapun, suka-suka anda
Selamat berkreasi karena cukup mudah untuk membuat text 3D (teks 3 Dimensi) menggunakan CSS3

Membuat Text 3D (Teks 3 Dimensi) Menggunakan CSS3 Rating: 4.5 Diposkan Oleh: ana sriwahyuni

22 komentar:

  1. Kalau running teks bisa gak ya dipakai dengan tampilan text 3d ini :)

    BalasHapus
    Balasan
    1. running teks itu maksudnya apa ya mas? maaf newbie :)

      Hapus
    2. Teks berjalan Mbak,yang biasa ada macam bentuk tampilan yang bisa dibuat seperti bentuk Mbak ini 3d.

      Hapus
  2. Makasih infonya Sizt,,,

    lanjutkan terus untuk berkarya dan berbagi....

    Salam Kompak,,,

    BalasHapus
  3. Menarik juga Mbak,kalau bentuk yang lain ada Mbak :)

    BalasHapus
    Balasan
    1. kalau untuk bentuk yang lain cukup mengganti jenis fontnya saja

      Hapus
  4. cocok untuk header blog nih. makasih ya mbak

    BalasHapus
  5. langsung dipraktekkan langsung mudeng nih

    BalasHapus
  6. susah cara setting text shadownya mbak. ada trik ataupun tips?

    BalasHapus
  7. Perbaiki header blogku ah. semoga saya bisa

    BalasHapus
  8. Ada tips trik untuk membuat text-shadow gak mbak?

    BalasHapus
  9. assalamu'alaikum..?

    ikut gabung ya?

    BalasHapus
  10. mantab gan.. senang bisa berkunjung kesini, semoga bermanfaat .salam kenal, kunjungan baliknya ditunggu
    www.sarimaduutama.web.id
    www.globalmandirisejahtera.web.id
    www.produsensusukambingbubuk.com
    www.produsensusukambing.com

    Info: Kami Pusat pabrik susu kambing etawa bubuk organik berkualitas, ( Supplier terbesar dan terperaya di indonesia ) Peluang usaha bagi anda yang memiliki bakat didunia Bisnis marketing untuk menjadi mitra distributor susu kambing etawa di kota anda,

    BalasHapus
  11. mantab gan.salam kenal, kunjungan baliknya ditunggu

    www.produsensusukambingbubuk.com
    www.sarimaduutama.web.id
    www.globalmandirisejahtera.web.id
    www.produsensusukambing.com

    BalasHapus
  12. pingin nyoba 3Dteksnya di pasang di Header bisa ga mas ?
    ajarin donk caranya :)

    BalasHapus
  13. Sudah saya pasang Bu di header, namun kok tampilannya belum terlalu bagus. Apakah ada saran Bu kode CSS nya yang mana akan di ubah agar tampilan nya lebih baik lagi di blog saya. Mohon sarannya ya Bu. Terima kasih.

    BalasHapus
    Balasan
    1. sudah bagus kok bu, cuma terlihat kecil..
      kalau ingin lebih bagus bisa mengganti bentuk fontnya

      Hapus
    2. Lebih baik font nya di ganti jenis apa ya bu agar kelihatan seperti font animasi, maaf saya juga masih belum familiar dengan kode css ini bu (transition dan rgba).

      Hapus
    3. kalau untuk font-font animasi saya sendiri belum mengetahuinya bu, coba cari di google bu, mungkin ada dan bisa dipasang di blog

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia