Cara Menciptakan Foto Preview Dengan Css3

Foto Preview merupakan hasil background dari selesai sebuah foto. Keindahan sebuah foto akan nampak terlihat sehabis kita ubah dengan beberapa effect. Mungkin Anda pernah mencetak sebuah foto, sebelum kita mencetak foto sebaiknya kita melihat hasil kesudahannya melalui Preview semoga hasilnya sesuai dengan yang kita harapkan.

Background pada foto sanggup kita ubah sesuai dengan yang kita inginkan, alasannya ialah background pada foto mempunyai nilai keindahan dengan menambahkan banyak sekali effect menyerupai hitam putih atau blur. Selain menambah effect dengan aplikasi editor foto, kita juga sanggup membuat effect pada gambar di Blog.

Menciptakan effect pada gambar di Blog dengan properti CSS, pada prinsipnya dengan kode opacity jikalau ingin membuat gambar menjadi blur dan greyscale untuk membuat gambar menjadi hitam putih dikala gambar di hover.

Demo   CODE

Pada foto preview Galerry ini Anda sanggup membuat beberapa effect sekaligus dengan cara menekan tombol maka effect akan terlihat. Terdapat beberapa tombol dan pada setiap tombol mempunyai effect yang berbeda. Berikut ini caranya :

Buka editor Template, kemudian Anda cari kode ]]></b:skin> kemudian salin aba-aba dibawah ini dan pasangkan sebelumnya atau diatasnya.

/*Galerry Foto Preview CSS3*/
button {
  border: 0;
  background: none;
  outline: none;
}

.options {
  margin-top: 30px;
}

.image[data-filter=mono] {
  -webkit-filter: grayscale(1);
}

.image[data-filter=tonal] {
  -webkit-filter: brightness(1) grayscale(1) opacity(0.85);
}

.image[data-filter=noir] {
  -webkit-filter: contrast(1.3) grayscale(1);
}

.image[data-filter=fade] {
  -webkit-filter: hue-rotate(345deg) sepia(0.2) contrast(1.1);
}

.image[data-filter=chrome] {
  -webkit-filter: saturate(1.4) brightness(1.2) contrast(1.2) sepia(0.1);
}

.image[data-filter=process] {
  -webkit-filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2);
}

.image[data-filter=transfer] {
  -webkit-filter: sepia(0.4) saturate(1.3);
}

.image[data-filter=instant] {
  -webkit-filter: sepia(0.2) hue-rotate(-10deg) opacity(0.75) contrast(1.8) saturate(0.7);
}

Selanjutnya Anda cari aba-aba </body>, salin aba-aba dibawah ini dan pasangkan diatasnya.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />

Note : Apabila di Template Anda sudah Anda aba-aba diatas lewati langkah diatas.

Masih pada aba-aba </body>, silahkan Anda salin aba-aba dibawah ini dan pasangkan diatasnya atau dibawah aba-aba diatas.

<script type="text/javascript">
//<![CDATA[
[
    'none',
    'mono',
    'tonal',
    'noir',
    'fade',
    'chrome',
    'process',
    'transfer',
    'instant'
].forEach(function (item) {
    this.querySelector('.' + item).addEventListener('click', function () {
        this.querySelector('.image').dataset.filter = item;
    }.bind(this));
}, document);
//]]>
</script>

Sekarang kita menuju pemasangan HTML, Anda sanggup memasangkannya pada Entri gres atau di daerah yang Anda kehendaki .

<img class="image" data-filter="instant" src="URL Gambar">
<div class="options">
<button class="none">None</button> ·
<button class="mono">Mono</button> ·
<button class="tonal">Tonal</button> ·
<button class="noir">Noir</button> ·
<button class="fade">Fade</button> ·
<button class="chrome">Chrome</button> ·
<button class="process">Process</button> ·
<button class="transfer">Transfer</button> ·
<button class="instant">Instant</button>
</div>

Semoga bermanfaat!


Sumber http://www.websiteedukasi.com/