KATEGORIA:

Filtry graficzne css

filtry css

Edycja zdjęć za pomocą filtrów

Możliwość edycji zdjęć bezpośrednio na stronie internetowej to ogromny krok naprzód. CSS3 daje nam taką możliwość – nie ma potrzeby dokonywania obróbki graficznej wielu zdjęć i wysyłania ich na serwer. Można to zrobić hurtowo – jedną komendą.

JAK UŻYWAĆ FILTRÓW GRAFICZNYCH?

Co możemy zrobić ze zdjęciem Mieroszowa widocznym poniżej?

filtry img - css3

Aby edytować zdjęcie za pomocą css3 należy użyć właściwości filter, jak w poniższym przykładzie.

filter: nazwa(wartosc)
-webkit-filter: nazwa(wartosc) /* zapis dla google chrome, safari i opery */

1. SEPIA

W tym przypadku nazwą filtru jest sepia a wartością procenty. 0% oznacza, że nie ma sepii a 100% oznacza pełną sepię. Można także użyć liczb, gdzie 1 to 100% sepii a 0.4 to 40%.

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

Na zdjęciu poniżej widać sepię o wartości 100%.

filtry img - css3

2. GRAYSCALE

W podobny sposób używamy filtru, który odpowiada za skalę szarości zdjęcia – jego nazwa to grayscale a wartością są procenty lub liczby. 100% oznacza pełną skalę szarości, 0% – brak. Jeżeli chodzi o liczby, to 1 oznacza 100% a 0.5 oznacza 50%.

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

Na zdjęciu poniżej widać skalę szarości o wartości 100%.

filtry img - css3
Poniżej zdjęcie, na którym jest 70% skala szarości.

filtry img - css3

3. NASYCENIE

Używając filtra saturate określamy poziom nasycenia kolorów danego elementu. Wartością domyślną jest 0. W tym przypadku także możemy skorzystać z procentów lub liczb (0 – brak filtru, 100% to 1, 200% to 2 itd.).

filter:saturate(200%);
-webkit-filter:saturate(200%);

Poniżej przykład zdjęcia Mieroszowa z saturacją 200%.

filtry img - css3
Poniżej zdjęcie z saturacją 300%.

filtry img - css3

4. BLUR

Filtr blur odpowiada za rozmycie elementu na stronie. Wartość podajemy np. w pikselach gdzie 0 to wartość domyślna.

filter: blur(3px);
-webkit-filter: blur(3px);

Poniżej zdjęcie z rozmyciem o wartości 3px.

filtry img - css3
Poniżej zdjęcie z rozmyciem o wartości 10px.

filtry img - css3

5. BRIGHTNESS

Filtr brightness odpowiada za jasność zdjęcia. Wartość domyślna to 1 (lub 100%) im mniejsze wartości, tym zdjęcie jest ciemniejsze np. 0.5 (lub 50%) lub 3 (lub 300%)

filter: brightness(250%);
-webkit-filter: brightness(250%);

Poniżej zdjęcie Mieroszowa z filtrem brightness o wartości 250%.

filtry img - css3
Poniżej zdjęcie z jasnością ustawioną na 0.5.

filtry img - css3

6. CONTRAST

100% (lub 1) to wartość domyślna. Aby wzmocnić kontrast używamy większych wartości, aby zmniejszyć używamy wartości niższych od 100%.

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

Poniżej zdjęcie z kontrastem 0.2.

filtry img - css3
Poniżej zdjęcie z kontrastem 200%.

filtry img - css3

HUE-ROTATE

hue-rotate umożliwia obrót kolorów na kole barw. W tym przypadku wartością są stopnie na kole kolorów. 360deg to pełny obrót na kole. Wartością domyślną jest 0. Poniżej kilka eksperymentów.

filter: hue-rotate(30deg);
-webkit-filter: hue-rotate(30deg);

hue-rotate o wartości 30 stopni.

filtry img - css3
Poniżej hue-rotate o wartości 150 stopni.

filtry img - css3
hue-rotate o wartości 270 stopni.

filtry img - css3

INVERT

Filtr invert pozwala na uzyskanie efektu negatywu – odwrócenia kolorów. Wartość domyślna to 0, maksymalna to 100% (lub 1) – czyli najwyższy poziom odwrócenia kolorów.

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

Poniżej zdjęcie Mieroszowa z filtrem invert o wartości 100%.

filtry img - css3
Poniżej filtr invert o wartości 0.55.

filtry img - css3

ŁĄCZENIE FILTRÓW FOTOGRAFICZNYCH

Jest możliwość łączenia ze sobą filtrów w jednej linii, tak jak w poniższym przykładzie.

filter: brightness(120%) blur(2px) grayscale(80%);
-webkit-filter: brightness(120%) blur(2px) grayscale(80%);

Poniżej efekt połączenia filtrów:

filtry img - css3

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *