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]