Filtry graficzne w CSS – ciekawe efekty na stronę internetową

Czas czytania: 4 minut

Obecnie istnieje kilka sposobów na zmianę koloru obrazka bez użycia programów do obróbki grafiki. Jedną z takich metod jest zastosowanie filtrów graficznych oferowanych przez właściwość CSS filter.

Z pomocą tej cechy możemy zdjęcie przyciemnić, rozjaśnić, rozmyć a nawet przerobić na czarno-białe. Oczywiście takie zmiany nie są permanentne – można je w dowolnym momencie zmienić. Właściwość Filter idealnie nadaje się również do tworzenia ciekawych animacji. Ja na moim blogu mam kilka tego typu efektów choć by na obrazku wyróżniającym wpis.

Wyjaśnienie właściwości Filter

Jest to dość ciekawa właściwość dająca nam spore pole do manewru. Zawiera ona wartości takie jak:

• blur (rozmycie)
• sepia (zdjęcie brązowe jak stare fotografie)
• opacity (przezroczystość, w efekcie czego rozjaśnienie lub przyciemnienie obrazka w zależności od znajdującego się pod spodem tła)
• drop-shadow (cień)
• brightness (rozjaśnienie)
• saturate (intensywność barw, nasycenie)
• hue-rotate (zamiana kolorów, odwrócenie ich np. niebieski na różowy)
• invert (negatyw)
• grayscale (szarość, zdjęcie robi się czarno-białe)
• contrast (zmiana kontrastu)
• none

Przykładowe użycia:

Poniżej znajdziecie kilka przykładowych zastosowań efektów. Zasady ich działania różnią się między sobą dlatego warto zwrócić uwagę w jaki sposób zapisałam dane rozwiązanie.

Rozmycie obrazka efekt: blur

Wraz ze wzrostem wartości parametru obrazek staje się coraz mniej wyraźny.

Przykład zastosowania

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

---

Zamiana na zdjęcie sepia efekt: sepia

100% – pełna, 0% – brak
W tym przykładzie pokazane zostało jak działa filtr zamieniający kolory obrazka na typowe przy starych zdjęciach w kolorze sepi (lekko brązowe).

Przykład zastosowania

-webkit-filter: sepia(100%); 
filter: sepia(100%);

---

Dodanie przezroczystości do grafiki efekt: opacity

100% – pełna, 0% – brak

Opacity powoduje, że nasz obrazek staje się przezroczysty. W efekcie tego zaczyna prześwitywać znajdujące się pod nim tło. Obrazek z ustawieniem 0% będzie całkowicie niewidoczny, z kolei 100% to jego domyśle ustawienia.

Przykład zastosowania

-webkit-filter: opacity(30%); 
filter: opacity(30%);

---

Dodanie cienia efekt: drop-shadow

Z pomocą tego filtra możemy dodać cień pod nasz obrazek.

Przykład zastosowania

-webkit-filter: drop-shadow(5px 5px 15px blue); 
filter: drop-shadow(5px 5px 15px blue);

---

Efekt przyciemnienia, rozjaśnienia grafiki: brightness

wartości od 0 – 1, im bliżej 0 tym obraz jest ciemniejszy
Tym razem efekt jaki otrzymamy to przyciemnienie (ściemnianie) lub rozjaśnienie grafiki w zależności od tego jak dobierzemy nasze parametry.

Przykład zastosowania

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

---

Zmiany nasycenia efekt : saturate

Z pomocą tego efektu można zmienić stopień nasycenia kolorów. Przydatne jeśli zdjęcia są naszym zdaniem zbyt szare a woleli byśmy uzyskać bardziej nasycone barwy.

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

---

Efekt zamiany barw: hue-rotate

W efekcie zastosowania tej właściwości kolory na obrazku zostaną zastąpione przez inne.

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

---

Odwrócenie kolorów efekt: invert

ma tylko 2 wartości 100% i 0%
Użycie tego filtra spowoduje „odwrócenie” kolorów (ich inwersje) np. Kolor biały zamieni się na czarny.

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

---

Skala szarości efekt : grayscale

100% brak kolorów, 0% – pełne kolory. Za pomocą tej metody możemy dokonać desaturacji obrazu (zmienić w czarnobiały).

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

---

Efekt: contrast

0% – czarny obraz, brak kolorów, 100% normalne zdjęcie, powyżej 100% zwiększające się kontrast

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

---

Łączenie ze sobą filtrów: brightness + contrast

-webkit-filter: contrast(200%) brightness(0.6); 
filter: contrast(200%) brightness(0.6);

Jak widać dość to dość ciekawie efekty. Podobnie jak w przypadku wielu funkcji CSS w zależności od przeglądarki potrzebny będzie odpowiedni przedrostek.

-webkit- dla Chrome, Opery i Safari

Internet Explorer w starszych wersjach nie obsługuje tej właściwości.

Jak zmienić kolor po najechaniu kursorem myszy

Zmiana koloru obrazka po umieszczeniu na nim kursora jest bardzo prosta. Wystarczy jedynie nadać ilustracji w CSS właściwość :hover i tak:

.siepia:hover {
-webkit-filter: sepia(100%); 
filter: sepia(100%);
}

W analogiczny sposób stosujemy zmiany dla innych opcji takich jak rozjaśnienie, dodanie cienia.

• Mieszanie koloru obrazu z tłem

tagi po których można znaleźć stronę:
filtr na stronie, filtrowanie kolorów, zmiana obrazków, zaciemnianie rozjaśnianie grafik, efekty CSS3, tutorial CSS, rozjaśnienie, ściemnianie zdjęcia, tutorial CSS, kolorowanie img, zmiana koloru tła obrazka, Filtry graficzne w CSS3, Filters css, przykłady, demo, color image, filtry graficzne, zmiana wyglądu grafiki z pomocą filtrów CSS, jak zrobić efekt ściemniania css