CSS3 Filters

Dziś zajmiemy się filtrami w CSS3, czyli jak otrzymać ciekawy efekt z Photoshopa w przeglądarce. Za filtry rozumiemy wszystkie operacje na obrazach jak sepia, negatyw, rozmycie, kontrast itd. W tym krótkim poradniku omówię większość z nich. Nie jest to na prawdę trudne i nie jest tego dużo, więc warto poświęcić te parę minut i zapamiętać składnie kodu. Jeśli jesteś zainteresowany — zapraszam do czytania ;-)

Rozmycie

img {
      -webkit-filter: blur(2px);
}

Skala szarości

img {  
   -webkit-filter: grayscale(100%);  
}

Cień

img{
     -webkit-filter: drop-shadow(8px 8px 20px black);
}

Sepia

img{
    -webkit-filter: sepia(1);
}

Jasność

img{
    -webkit-filter: brightness(2.7);
}

Kontrast

img{
    -webkit-filter: contrast(0.8);
}

Barwa

img{
    -webkit-filter: hue-rotate(150deg);
}

Negatyw

img{
    -webkit-filter: invert(1);
}

Nasycenie

img{
    -webkit-filter: saturate(1.4);
}

Przezroczystość

img{
    -webkit-filter: opacity(0.7);
}

Nie jest to za bardzo skomplikowane, więc daruje sobie opisywanie działania każdej z tych funkcji. Oczywiście, efekty można łączyć, co możesz sprawdzić w przygotowanej do tego stronie.

[button url=”http://demo.wojtek1150.com/CSSFilters/" target=”blank” icon=”icon: flask”]Zobacz DEMO[/button]