HTML5 & CSS3

Filtry graficzne w CSS3 – przyszłościowa edycja zdjęć

Jakiś czas temu Mateusz pisał o maskach w CSS3, dzięki którym będziemy mogli w znacznym stopniu zastąpić niektóre funkcje programów graficznych, na rzecz odpowiednich reguł w CSS. Ja natomiast trafiłem na kolejne, ciekawe własności CSS‚a, które – jeśli zostaną oficjalnie wprowadzone (i poprawnie zaimplementowane w przeglądarkach) – bardzo mocno namieszają w świecie webdesignerów. O czym mowa? O filtrach graficznych. Zapraszam do lektury.

Niestety, filtry są w chwili obecnej funkcją eksperymentalną, wspieraną przez silnik WEBKIT. Na dzień dzisiejszy, przykłady wstawione do strony-demo na końcu wpisu będą działać więc jedynie w przeglądarkach Chrome oraz Safari (także Opera 15). Miejmy jednak nadzieję, że wkrótce implementacja rozszerzy się także na pozostałe przeglądarki. Tym czasem warto dodawać już deklaracje dla pozostałych producentów, używając standardowych przedrostków.

W jaki sposób deklarować filtry w arkuszu CSS? Jest to naprawdę proste.

filter: nazwa_filtru(wartość);

Zabierzmy się więc do praktycznego używania kilku dostępnych już filtrów.

Blur (rozmycie)

Filtr rozmycia możemy wykorzystać na przykład dla zdjęć, które mają znaleźć się w tle któregoś z elementów na na stronie internetowej. Jednostką wartości są piksele. Im większa wartość, tym rozmycie zdjęcia będzie większe.

-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);

Poniżej przedstawiać będę również zrzuty przykładów, przydatne szczególnie tym użytkownikom, których przeglądarki nie wspierają jeszcze filtrów CSS. Po lewej stronie zawsze znajdować się będzie zdjęcie oryginalne, po prawej natomiast – przetworzone przez filtr CSS.

Blur - rozmycie w CSS

Brightness (jasność)

Twoje zdjęcia w galerii są zbyt ciemne? Wgrałeś już ich bardzo dużą ilość i nie chcesz edytować każdego z nich z osobna w programie graficznym? W bardzo łatwy sposób możesz zmienić ich jasność za pomocą filtra w CSS. Wartością, w tym przypadku, jest liczba z przedziału od 0 do 1, gdzie im bliżej zera, tym zdjęcie będzie ciemniejsze.

-webkit-filter: brightness(0.4);
-moz-filter: brightness(0.4);
-o-filter: brightness(0.4);
-ms-filter: brightness(0.4);
filter: brightness(0.4);

Brightness - jasność w CSS

Saturation (nasycenie)

Jeżeli Twoje zdjęcia są szare, bure i ponure, warto wycisnąć z nich jakiekolwiek kolory, zwiększając wartość nasycenia. Tym razem jednostką są procenty. 0% oznacza zdjęcie czarno-białe, 100% – zdjęcie o zwykłych kolorach, natomiast wartości powyżej 100% zwiększają standardowy poziom nasycenia zdjęcia.

-webkit-filter: saturate(300%);
-moz-filter: saturate(300%);
-o-filter: saturate(300%);
-ms-filter: saturate(300%);
filter: saturate(300%);

Saturation - nasycenie kolorów w CSS

Hue rotate – odwrócenie barw

Chcemy z człowieka zrobić zielonego ufoludka? Żaden problem! Wystarczy przekręcić koło barw o kilkadziesiąt stopni. To właśnie w stopniach wyraża się jednostka wartości dla tego filtru. Zalecam eksperymenty, bo efekty mogą być naprawdę bardzo zabawne.

-webkit-filter: hue-rotate(90deg);
-moz-filter: hue-rotate(90deg);
-o-filter: hue-rotate(90deg);
-ms-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);

Hue rotate - odwrócenie barw w CSS

Contrast (kontrast)

Zdjęcia są niewyraźne? Dodajmy im kontrastu. To również robimy za pomocą procentów. 0% oznacza czarne zdjęcie, 100% – normalne, a wartości powyżej – zwiększają go.

-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
-o-filter: contrast(200%);
-ms-filter: contrast(200%);
filter: contrast(200%);

Contrast - kontrast w CSS

Invert (negatyw)

Potrzebujemy efektu o znanej wszystkim nazwie „negatyw”? Bardzo proszę. Wartości procentowe, z tym, że w tej chwili Webkit obsługuje tylko wartość 100%.

-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);

Invert - negatyw w CSS

Grayscale – skala szarości

Jeśli chcielibyśmy podmienić wszystkie zdjęcia na witrynie na takie same, z tym, ze czarno-białe, powinniśmy wykorzystać właśnie ten filtr. Korzystamy z wartości procentowych, gdzie 100% oznacza brak kolorów, natomiast 0% – pełne kolory.

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);

Grayscale - skala szarości w CSS

Sepia

Efekt tak bardzo pożądany w ostatnim czasie. Chcesz być na topie? Włącz sepię! Tak samo, jak w przypadku skali szarości i tu korzystamy z procentów. 100% oznacza pełną sepię, natomiast 0%- jej brak.

-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);

Sepia w CSS

Zakończenie

Dodać mogę jeszcze, że filtry fotograficzne można ze sobą łączyć. Robimy to w dość intuicyjny sposób. Dla przykładu:

img {filter: brightness(0.4) saturate(300%);}

Miejmy nadzieję, że już niedługo do grona przeglądarek obsługujących filtry dołączą również inni producenci. Czy ciągłe rozbudowywanie CSS to początek końca standardowych aplikacji graficznych? Czas pokaże. Na koniec zapraszam Was do testów na przygotowanej przeze mnie stronie-demo. Liczę na Wasze komentarze.

Zobacz demo: Filtry graficzne w CSS

Zdjęcie źródłowe pochodzi z Freedigitalphotos.net.

komentarzy 12

  • Awatar
    feamoignargfaionakfj9ajfopamjv

    5 sierpnia 2013 22:22

    „strony-demo na końcu wpisu będą działać więc jedynie w przeglądarkach Chrome oraz Safari.”

    I Operze 16 ;)
    (chociaż osobiście chyba do końca będę musiał korzystać z 12.x, nie wiedzę żadnej alternatywy :/)

    Od lat brakuje mi rozmycia, szkoda, że jeszcze trochę trzeba poczekać ;)

    Odpowiedz
    • Awatar
      Michał Kortas

      5 sierpnia 2013 22:33

      Oooo, dziękuję za informację. Nie testowałem jeszcze w najnowszej Operze. Poprawiłem wpis i podlinkowałem do Twojego komentarza. Pozdrawiam!

      Odpowiedz
  • Awatar
    Mr.Mr

    6 sierpnia 2013 06:00

    Biorąc pod uwagę jak i w jaką stronę rozwijają się prace W3C przyszłość projektowania w przeglądarce może być całkiem realna. Zresztą już to się dzieje o czym pisaliśmy na webroad.pl tu: https://webroad.pl/inne/550-projektowanie-w-przegladarce

    Jestem ciekaw, czy w ciągu kilku najbliższych lat arkusze stylów zmienią się w takie mini edytory grafiki…?

    Odpowiedz
    • Awatar
      Michał Kortas

      6 sierpnia 2013 11:12

      Właśnie się już tak zastanawiałem… Gdyby za kilka lat udało się zastąpić taki edytor zwykłym CSS’em i HTML’em :)

      Odpowiedz
      • Awatar
        Mr.Mr

        6 sierpnia 2013 11:46

        Wydaje mi się, że to wszystko trzeba pisać w cudzysłowie bo nie ma chyba opcji żeby technologia zaszła aż tak daleko (może mile się rozczaruję). Jednak mimo wszystko takie pojedyncze „funkcjonalności” programów graficznych „transponowane” na CSS dają bardzo duże możliwości.

        Odpowiedz
  • Awatar
    Łukasz

    8 sierpnia 2013 11:27

    Mega ciekawe rozwiązanie. Daje duże pole manewru bez edycji w PSie czy Gimpie czy czymkolwiek innym. Ciekawe co będzie dalej… Jak rozwinie się CSS3, bo na razie cały czas zaskakuje rozwiązaniami :)

    Odpowiedz
    • Awatar
      Michał Kortas

      8 sierpnia 2013 13:02

      Teraz tylko czekać na pełną implementację w przeglądarkach. Choć już nawet prefiksy by mnie zadowalały, o ile powyższe filtry zaczęły by działać nie tylko na Webkit :-)

      Odpowiedz
      • Awatar
        Łukasz

        8 sierpnia 2013 13:06

        To fakt, ale patrząc po tym jak wygląda „rynek” przeglądarek, gdzie na topie jest Chrome, a Opera również oparta jest już o Webkit z tego co kojarzę, to jest nieźle – nawet jak na testową funkcjonalność :)

        Odpowiedz
      • Awatar
        Michał Kortas

        8 sierpnia 2013 13:14

        A w Gecko też zaczyna się coś dziać. Na IE za szybko nie liczę, no chyba, że mnie mile zaskoczą ;-)

        Odpowiedz
      • Awatar
        Łukasz

        8 sierpnia 2013 13:17

        Od Firefoxa odszedłem gdzieś przy wersji 4.0. Wtedy też przeglądarka generalnie zaczęła się wieszać i zwolniła. Do Chrome’a nie byłem przekonany, ale jakoś zostałem. Nie było dobrej alternatywy. Safari nie lubię (pomimo, że pracuję na MacBooku), w Operze zawsze coś mi przeszkadzało, a o IE nie wspominam nawet ;)

        Odpowiedz
  • Awatar
    Janek

    17 sierpnia 2017 14:24

    Witaj

    Zapodasz jak można fajnie obrazek zlać z tłem ? Chodzi o to aby np końcowe fragmenty (obramowanie) stopniowo przechodziło w zamglenie / kolor biały ? Tak aby estetycznie to wyglądało ? Mam nadzieje że wiesz o co mi chodzi

    Odpowiedz

Zostaw odpowiedź