NEWS
Loading...
  • Posted by : Johanes Djogan 2 Des 2010

    Text 3 Dimensi dengan CSS3


    hai sobat,saya mau share trik css3 lagi nih,kali ini saya akan share cara membuat 3D text atau text 3dimensi hanya dengan css3 hasil modifikasi saya dan ditambah dengan css hover efect animation.
    jadi text animasi dah n_n.Sobat bisa lihat contoh dan Css'a DISINI.Untuk menggunanakan trik ini,ada baik'a sobat backup dulu template sobat n_n

    Sebelum sobat mencoba trik ini,sobat harus tau,kalau trik hover animation hanya muncul di browser yang mendukung css3 animation,seperti google chrome.untuk mozilla,belum bisa mendukung css3 animation,tetapi untuk 3D text/shadow bisa dinikmati di mozilla4.saran saya buat sobat,sering-seringlah update browser ke versi baru agar sobat bisa merasakan kehebatan CSS3.
    ok dah~ langsung aja...

    pertama,kamu pilih style shadow'a DISINI
    kemudian css'a sobat taruh di template sobat,jika sudah pilih salah satu,
    sobat masukan kode html dibawah ini
    <div id="footer_container">
    <h2 class="footer_title">
    Blog Johanes</h2>

    Keterangan:

    -Nama Text bisa sobat ganti.(yang Blog johanes)

    -Ukuran font/jenis tulisan,bisa sobar rubah

    -bila sobat ingin menambahkan efek gradient,sobat tinggal tambahkan kode ini

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));

    -jika sobat tidak ingin menambahkan efek animasi/hover efect,sobat tinggal hapus kode
    #footer_container1 h2.footer_title1:hover { isi Css }

    -jika sobat ingin mengganti warna text,ganti kode HEX di color:#8BC2C5; pada css #footer_container h2.footer_title untuk warna text sebelum di hover dan kode HEX di color: #B19FD9; untuk warna text setelah di hover.

    -jika sobat ingin ganti warna shadow pada text dan mengganti arah shadow,sobat tinggal ganti hex dan pixel pada css text shadow.
    Contoh :text-shadow: 0px 1px #000,

    0px=arah shadow Horizontal=bila diubah ke angka lebih dari 1,maka shadow akan kearah kanan,sedangkan bila diubah ke angka kurang dari -1,maka shadow akan kearah Kiri.
    1px=arah shadow Vertikal=bila diubah ke angka lebih dari 1,maka shadow akan kearah bawah,sedangkan bila diubah ke angka kurang dari -1,maka shadow akan kearah atas.
    #000= warna shadow text,sobat bisa ganti warna'a(HEX)



    Demikian tutorial dan penjelasan tentang 3D Text Css3 dari saya.selamat mencoba,dan jangan lupa tinggalkan komentar'a ya n_n


    { 19 comments... read them below or Comment }

    1. Wah keren ilmunya thanks izin praktek dok

      BalasHapus
    2. Hmm artikel yang menarik sobbb...btw apa program CSS 3 ini bisa dipakai buat bikin banner??? soalnya blogku blum punya header banner..klo ada info terbaru mohon pencerahannya ya :D

      BalasHapus
    3. bisa kq sob...
      misal'a css header sobat
      h2.{ isi css}

      sobat tinggal tambahin aja css'a jadi seperti ini

      h2{
      color:#8BC2C5;
      font-size: 20px;
      text-shadow: 0px 1px 5px #000, 0px 2px #000, 0px 3px #000, 0px 4px #000, 0px 5px #000, 0px 6px #000, 0px 7px #000, 0px 8px 10px #000;

      }

      BalasHapus
    4. Thanks ya Gan ntar saya coba praktek aja... mantapppp :D

      BalasHapus
    5. wow keren ini gan....ane malah belum faham masalah ini...Boleh lah belajar dari blog ini

      BalasHapus
    6. Sob 3 D pakai Java Script ada ga ya....

      BalasHapus
    7. @Rae: Mending pake CSS3 aja. Soalnya selain enteng, pake CSS juga lebih simpel. Kalo pake JS sih kayaknya belum pernah liat, kalo ada pun saya saranin lebih baik pake CSS
      CMIIW :D

      BalasHapus
    8. salam kenal.........
      http://software-corporation.blogspot.com/

      BalasHapus
    9. sobbb boleh tanya,,
      cara modifikasi/edit tampilan kotak komentar keren
      kayak punya agan ini...

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -