NEWS
Loading...
  • Posted by : Johanes Djogan 25 Jan 2013


    Untuk kalian yang mungkin sudah familiar dengen efek filter yang ada photoshop pasti tentunya sudah tahu bagaimana efek filter seperti blur,sepia,grayscale,dll pada gambar.nah kali ini saya mau berbagi informasi,trik dan tutorial menarik lagi tentang CSS3 - Filters untuk Gambar dengan penerapan yang sederhana dan dasar.mungkin sudah ada beberapa yang tahu tentang trik ini,tapi bagi yang belum,bisa kalian coba dan mempelajari tentang dasar" syntax css Filter ini.semoga bermanfaat ^^


    Untuk Penerapanya nanti cukup sederhana hanya sesuaikan css name pada class html,atau copy paste syntax css pada class/id html yang anda inginkan,misalkan contoh sederhana-nya :

    HTML

    <div class='nama-filter'>
    <img border="0" height="400" src="http://4.bp.blogspot.com/-BKUd4ayf0do/UQFKBXmlGzI/AAAAAAAAFGM/h-5QkXyu-84/s400/30059960.jpg" width="283" />
    </div>

    nama-filter diganti dengan css name yang ada di contoh dibawah,misalkan saya pilih efek blur,HTML class-nya menjadi <div class='blur'> (tanpa tanda titik)

    #class html dan css name harus sama agar trik ini WORK!


    #CSS Diletakan diatas kode ]]</b:skin>

    #HTML Diletakan diantara <body> isi html </body>


    Oia sebelumnya Saya sarankan Gunakan CSS ini hanya untuk keperluan saja,mungkin kita tahu beberapa orang lebih sering menggunakan browser google chrome dengan versi terbaru(rekomendasi) ,oleh karena itu gunakan css yang memang untuk chrome (-webkit)

    #ada kemungkinan mozilla belum mendukung css3 filter ini





    Blur
    Semakin Besar Nilai blur yang diberikan,maka efek blur pada gambar akan semakin pudar.

    Sebelum                                                                         Sesudah



    CSS


    .blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    }






    Brightness
    Semakin Besar Nilai Brightness atau kecerahan yang diberikan,maka gambar akan semakin terang.
    dan sebaliknya juga diberi nilai dibawah 0 atau minus 1 gambar akan semakin gelap.
    antara (-1.0 s/d 1.0)

    Sebelum                                                                         Sesudah



    CSS


    .Brightness {
    filter: brightness(0.2);
    -webkit-filter: brightness(0.2);
    -moz-filter: brightness(0.2);
    -o-filter: brightness(0.2);
    -ms-filter: brightness(0.2);
    }





    Saturation
    Semakin Besar Nilai Saturation atau ketajaman warna yang diberikan pada gambar,maka warna pada gambar akan semakin terang/cerah.

    Sebelum                                                                         Sesudah



    CSS


    .Saturation {
    filter: saturate(2.0);
    -webkit-filter: saturate(2.0);
    -moz-filter: saturate(2.0);
    -o-filter: saturate(2.0);
    -ms-filter: saturate(2.0);
    }





    Hue-Rotate
    Untuk Hue-Rotate,nilai yang diatur menggunakan derajat yang sesuai terhadap arah jarum jam prinsip roda warna sejauh 360 derajat.


    Roda Warna

    Sebelum                                                                         Sesudah



    CSS


    .Hue-Rotate {
    filter: hue-rotate(170deg);
    -webkit-filter: hue-rotate(170deg);
    -moz-filter: hue-rotate(170deg);
    -o-filter: hue-rotate(170deg);
    -ms-filter: hue-rotate(170deg);
    }





    Contrast
    Semakin Besar Nilai Kontras yang diberikan pada gambar,maka tingkat kontras pada gambar akan semakin tinggi, dan begitu juga sebaliknya.

    Sebelum                                                                         Sesudah



    CSS


    .Contrast {
    filter: contrast(150%);
    -webkit-filter: contrast(150%);
    -moz-filter: contrast(150%);
    -o-filter: contrast(150%);
    -ms-filter: contrast(150%);
    }





    Grayscale
    Semakin Besar Nilai grayscale yang diberikan pada gambar,maka gambar akan semakin berubah warna menjadi abu-abu/gray.


    Sebelum                                                                         Sesudah



    CSS


    .Grayscale {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    }





    Sepia
    Efek photo filter Sepia akan semakin sempurna jika diberikan nilai 100%.

    Sebelum                                                                         Sesudah



    CSS


    .Sepia {
    filter: sepia(100%);
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -o-filter: sepia(100%);
    -ms-filter: sepia(100%);
    }



    Invert
    Filter ini untuk membalikan warna yang ada pada gambar dengan batasan 0% - 100%

    Sebelum                                                                         Sesudah



    CSS


    .invert {
    filter: invert(100%);
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    }




    Transparency
    Untuk efek transparant pastinya sudah tidak asing bukan,transparant juga dapat dikategorikan sebagai photo filter.

    Sebelum                                                                         Sesudah



    CSS


    .Transparency {
    opacity:0.5;
    filter:alpha(opacity=40);
    }


    Nah,apakah dalam satu gambar efeknya bisa kita satukan ,tentu saja bisa,kita bisa mengkombinasikan efek" filter seperti halnya filter pada photoshop,dan inilah hasil contoh nexperiment yang saya buat :

    Hasil:

    CSS


    .jomixed {
    filter: saturate(2.0);
    -webkit-filter: saturate(2.0);
    -moz-filter: saturate(2.0);
    -o-filter: saturate(2.0);
    -ms-filter: saturate(2.0);
    filter: contrast(122%);
    -webkit-filter: contrast(122%);
    -moz-filter: contrast(122%);
    -o-filter: contrast(122%);
    -ms-filter: contrast(122%);
    filter: hue-rotate(325deg);
    -webkit-filter: hue-rotate(325deg);
    -moz-filter: hue-rotate(325deg);
    -o-filter: hue-rotate(325deg);
    -ms-filter: hue-rotate(325deg);
    }




    Nah,setelah itu apa lagi yang dapat kita gunakan dengan css3 filter ini?
    dengan css filter kita juga bisa buat sebagai hover efek dan animasi infinity ataupun animasi yang menggunakan keyframe.

    misalkan untuk efek animasi hover,yg kita perlukan adalah css transition,misalkan kita beri nilai timing 0.5 detik.

    CSS


    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;

    Silakan anda coba arahkan kursor anda pada gambar dibawah ini.

    HASIL :

    Contoh 1

    CSS


    .blur-animasi {
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;}
    .blur-animasi:hover {
    filter: blur(6px);
    -webkit-filter: blur(6px);
    -moz-filter: blur(6px);
    -o-filter: blur(6px);
    -ms-filter: blur(6px);
    }

    Contoh 2


    CSS


    .blur-animasi1 {
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    filter: blur(6px);
    -webkit-filter: blur(6px);
    -moz-filter: blur(6px);
    -o-filter: blur(6px);
    -ms-filter: blur(6px);
    }
    .blur-animasi1:hover {
    filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    }





    Dan cara diatas juga sama untuk css filter lainya,mudah bukan? sekian penjelasan saya tentang >CSS3 Filters,Arigatou gozaimasu minna-san~ ja mata ne~ ^^/



    Artwork by :絵 | mia@ミア [pixiv]



    Sebelum mencoba Trik ini,ada baiknya anda membaca kebijakan .

    http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html




  • 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 -