CSS Galeri Gambar Dengan Efek Blur

CSS Galeri Gambar Dengan Efek Blur

Assalammualaikum Wr.Wb
Under88 - Sejak CSS filter efek mendarat di WebKit, saya berfikir untuk mencoba berineraksi dengan itu.. Bagaimana hal itu akan cocok dengan tren desain web saat ini? Pada saat ini, kesan awal saya adalah bahwa cara terbaik untuk menampilkan kekuatan filter CSS adalah sesuatu seperti sebuah galeri gambar.

Dengan filter CSS sangat banyak sekali pilihan, itu akan menyenangkan untuk membuat galeri foto di masa depan. Lebih lanjut dalam artikel ini kita akan membuat galeri gambar sederhana menggunakan filter CSS dan CSS3 :not pemilih.

 Kekurangan dari CSS3 pada gallery ini adalah tidak berjalan dengan sempurna pada browser Firefox namun pada browser Crome akan terlihat efek dengan jelas . lihat demonya..

View Page Demo

Sekarang Anda dapat melihat efek filter menggunakan Chrome Canary juga. Saya sarankan Anda untuk mendownloadnya untuk melihat CSS efek filter dalam tindakan. Juga, saya cukup yakin bahwa tak lama lagi kita akan melihat filter juga mendukung dalam rilis Chrome yang stabil.

Berikut adalah efek filter saat ini: grayscale, sepia, saturate, hue-rotate, opacity, invert, brightness, contrast, blur, drop-shadow. Baca lebih lanjut tentang mereka di sini.

Pada artikel ini kita akan menggunakan hanya blur dan grayscale efek untuk membuat galeri kecil. Juga, CSS3 :not pemilih akan membantu kita di sini seperti yang akan Anda lihat di bawah.

HTML
lihat bagaimana markup yang terlihat seperti:

<ul class="gallery">
  <li><img src="1.jpg"></li>
  ...
  <li><img src="6.jpg"></li>
</ul>

CSS
Saya pikir ini pertama kalinya dalam waktu yang lama ketika saya tidak memiliki terlalu banyak baris CSS untuk menunjukkan Anda. Kali ini, kurang lebih :)

Bagian yang menarik berkaitan dengan galeri: hover li: tidak (: hover) pemilih.. Ketika Anda membawa lebih dari daftar, kami akan menganggap Anda akan membawa juga atas elemen daftar dan kita akan menerapkan beberapa filter untuk elemen daftar non melayang.

Pada bagian gambar jelas,pada saat mouse ddalam posisi salah satu gambar,maka gambar yang lain akan nampak efek blur.

.gallery{
  list-style: none;
  margin: 50px auto; padding: 0;
  width: 642px;
  font-size: 0; /* fix inline-block spacing */
}
.gallery li{
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 200px; height: 150px;
    margin: 2px;
    border: 5px solid #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
    transition: all .3s ease;
}
.gallery:hover li:not(:hover){
    -webkit-filter: blur(2px) grayscale(1);
    opacity: .7; /* fallback */
}

Untuk contoh ini saya memilih untuk menggunakan inline-block bukannya float dan font-size: 0 .
Mengenai degradasi, inilah metode saya:

• Jika dukungan browser CSS filter dan :not, kemudian menerapkan filter dan juga menurunkan opacity.
• Jika browser tidak mendukung filter CSS (saat ini semua kecuali Canary) tetapi tidak mendukung :not , maka hanya menurunkan opacity.
• Jika browser terlalu lama dan tidak mendukung atau tidak opacity :not selector, maka efek pun tidak akan melakukan apa-apa.

Browser dukungan
Inilah dukungan saat ini untuk filter CSS efek: Chrome 20.0.1123.0 (saat ini Canary) dan Webkit nightly.

kesimpulan
Masa depan terdengar bagus. Kita sudah memiliki Modul Flexbox dan CSS Filter, saya suka berpikir bahwa dalam waktu dekat kami juga akan memiliki variabel dan CSS parent selector siap pakai. Saat yang menarik untuk web developer, bukan begitu?

View Page Demo

Sekali lagi, Untuk melihat DEMO di sarankan anda menggunakan Browser Crome

Wassalamuallaikum Wr.Wb

reference url