Görmüş oldugum bir makaleyi sizlerle paylaşmak istedim tamamen alıntıdır sonradan falan filan yapmayın :)
CSS3’ün bize vermiş oldugu filtreleme efekini göstericegiz. çok ufak bir kodlarla ile bunu nasıl yapıcagımızı göreim.
Aaa nasıl oluyor reiz diyenler olursa demosu buradadır isteyen bakabilir.Gelelim kodlarına..
HTML
Çok küçük kod ile halledeceğiz..
<ul class="gallery">
<li><img src="1.jpg"></li>
...
<li><img src="6.jpg"></li>
</ul>
CSS
Öyle artık satırlarca kodlara gerek yok ufak kodlar ile yapıcagız devir herşeyden kısma daha verimli kullanma zamandan zaman kazanma devri. Anaa bu kadarmı demeyin..
.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 */
}
Haa yeni modern tarayıcılarda çalışır zaten dandik kullananlarda burdaki yazıyı göremezler :D o yüzden 4eva modern browser