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

    Efek Cermin Dengan CSS3

    hai sobat,kali ini saya akan kasih tau gimana cara'a menambahkan efek Cermin atau Reflections pada gambar yang kita inginkan.contoh'a bisa sobat lihat disini .ini dia cara'a,Cekidot gan...


    Cara'a mudah kq,sobat tinggal copy paste kode ini ke template kamu.
    kode dibawah ini adalah css yang mempengaruhi efek cermin pada gambar


    -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));



    lalu sobat cari kata :
    img { 

    di template sobat,lalu copy paste css dibawah ini di css gambar sobat.

    jadi seperti ini
    img {
    -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
    }

    selesai deh.dengan cara diatas,akibat'a semua gambar di blog sobat,akan berefek cermin semua..
    karena secara umum,semua gambar menggunakan tag "img"
    nah loh!!!jangan panik ya...jika sobat ga mau pake cara diatas,ada cara alternatif nih n_n

    Pertama,masukan Css ini di tempate sobat

    .post-image {
    float: left;
    -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
    -webkit-border-radius: 3px;
    }


    lalu sobat copy paste juga kode html di bawah ini
    <img alt="Some title" class="post-image" src="http://1.bp.blogspot.com/_HGekX55lw4E/TPC27RymowI/AAAAAAAAARY/cZLpuzQKUOY/s1600/Untitled-2.jpg" />
    Url gambar bisa sobat ganti

    Selesai deh,dengan cara ini,sobat bisa menentukan sendiri gambar mana yang akan diberi efek cermin n_n selamat mencoba,dan jangan lupa backup dlu template sobat sebelum Berexperimen


    mudah bukan?silakan dicoba...

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

    1. wow Blog ini Full Tutorial...Mantap Ntar Ane Sedot ilmunya...Thanks Dah bagi2 Ilmu

      BalasHapus
    2. bagus nih....
      kok bisa ya jd kayak gitu...?

      BalasHapus
    3. wah bener2 ilmu yang bagus, makasih sob ilmunya.

      BalasHapus
    4. ga kq kang...justru pake css3 lebih enteng daripada pake gambar kang n_n

      BalasHapus
    5. [ KEREN GAN ] [ BAGUS GAN ] [ LANJUT GAN ]

      BalasHapus
    6. mantap gan... ijin copy ya buat tambahan.

      BalasHapus
    7. kunjungan malam . blog nya bagus visit me back n comment back trims .

      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 -