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?
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%.
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%.
Poniżej zdjęcie, na którym jest 70% skala szarości.
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%.
Poniżej zdjęcie z saturacją 300%.
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.
Poniżej zdjęcie z rozmyciem o wartości 10px.
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%.
Poniżej zdjęcie z jasnością ustawioną na 0.5.
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.
Poniżej zdjęcie z kontrastem 200%.
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.
Poniżej hue-rotate
o wartości 150 stopni.
hue-rotate
o wartości 270 stopni.
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%.
Poniżej filtr invert
o wartości 0.55.
ŁĄ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: