Memberi Efek Pada Gambar Dengan CSS3

Kalo saya lihat-lihat di Bersosial kayanya udah gak ada lagi atau mungkin jarang yang ngebagiin tutorial buat desain blog. Yasudahlah, daripada ngeributin masalah itu mending lihat thread yang ini, mungkin bisa berguna untuk blognya . Ini cuman tutorial tingan yang saya dapat di TWD, bagi yang udah tau silahkan lewatin aja ya

CSS​

Efek nge-Blur

Spoiler: nge-Blur

Code:

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

Efek Grayscale atau abu-abu

Spoiler: Abu-Abu

Code:

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

Efek Sepia

Spoiler: Sepia

Code:

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

Efek Brightgness

Spoiler: Brightgness

Code:

.filter img{
        -webkit-filter: brightness(0.3);
        -moz-filter: brightness(0.3);
        -o-filter: brightness(0.3);
        -ms-filter: brightness(0.3);
        filter: brightness(0.3);
    }

Efek Saturation

Spoiler: Saturation

Code:

.filter img{
        -webkit-filter: saturate(50%);
        -moz-filter: saturate(50%);
        -o-filter: saturate(50%);
        -ms-filter: saturate(50%);
        filter: saturate(50%);
    }

Efek Hue-Rotate

Spoiler: Hue-Rotate

Code:

.filter img{
        filter: hue-rotate(180deg);
        -webkit-filter: hue-rotate(180deg);
        -moz-filter: hue-rotate(180deg);
        -o-filter: hue-rotate(180deg);
        -ms-filter: hue-rotate(180deg);
    }

Efek Contrast

Spoiler: Contrast

Code:

.filter img{
        -webkit-filter: contrast(180%);
        -moz-filter: contrast(180%);
        -o-filter: contrast(180%);
        -ms-filter: contrast(180%);
        filter: contrast(180%);
    }

Efek Invert atau Negatif

Spoiler: Invert atau Negatif

.filter img{
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);
}[/CODE]

HTML​

Untuk mengeluarkan efeknya silahkan ikuti langkah dibawah ini:

Code:

        <div class="filter">
            <img src="URL gambarnya" alt="" />
        </div>

Kalo ada yang salah atau kurang jangan diam aja ya

 

wah,.. mantep nih gan kode css-nya...

 

nanti pasangnya dimana ya , keren nih . maklum saya tidak paham dengan kode2 kyak gini

 

Wah koleksi kode buat mempercantik blog

 

wah keren efeknya buat bikin gambar ok
klo wp kodingnya taruh mana gan

 

wkwkw ide berlian

 

Bagus den, bisa di terapkan

 

Bagus juga ini ya, tanpa harus edit bisa langsung berubah gambarnya gak perlu kamera 360 :v

 

ane book dulu tutornya gan

 

bisa disimpan ni sourcodenya, untuk di gunakan source code project kedepanya.

 

bingung

 

wow baru tau kalau gini bisa direkayasa via css

 

Wah kalo itu saya juga gak tau om maklum udah gak main WP lagi

 

kalo di blogger tinggal pasang aja di templatenya om nanti kalo mau bikin artikel, gambar artikelnya jangan lupa dibungkus sama HTML diatas

 

buat saya itu yang malah bikin ribet om , kalo ini kan bisa dibilang otomatis tinggal pasang HTMLnya doang

 

Hihihi ketuaun nih yang suka make 360

Silahkan om

Boleh-boleh

Dengan CSS bisa bikin apa aja om, bikin karakter Batman aja bisa

 

Sebenarnya saya nggak suka main 360 si om, soalnya biasanya di smartphone keluaran baru kamera default hp sudah support dengan efek filter diatas

 

Ini 360 versinya blogger kyaknya om.. hehehe

 

Kalau kreatif bisa juga bikin editor online menggunakan ini :V

 

wih keren gan css na, efeknya kaya di photoshop