Posted by Aak
Aak-share.com Updated at: 10:42:00 PM

Cara Membuat Foto Preview Dengan CSS3

No comments:
Foto Preview merupakan hasil background dari akhir sebuah foto. Keindahan sebuah foto akan nampak terlihat setelah kita ubah dengan beberapa effect. Mungkin Anda pernah mencetak sebuah foto, sebelum kita mencetak foto sebaiknya kita melihat hasil akhirnya melalui Preview agar hasilnya sesuai dengan yang kita harapkan.

Background pada foto dapat kita ubah sesuai dengan yang kita inginkan, karena background pada foto memiliki nilai keindahan dengan menambahkan berbagai effect seperti hitam putih atau blur. Selain menambah effect dengan aplikasi editor foto, kita juga bisa membuat effect pada gambar di Blog.

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



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

Buka editor Template, kemudian Anda cari kode ]]></b:skin> lalu salin kode 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 kode </body>, salin kode 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 kode diatas lewati langkah diatas.

Masih pada kode </body>, silahkan Anda salin kode dibawah ini dan pasangkan diatasnya atau dibawah kode 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 bisa memasangkannya pada Entri baru atau di tempat 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!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments