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

zmiana koloru obrazka

Kategoria wpisu Kurs CSS, Kursy Tagi: , , , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

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.

Właściwość 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.

efekt blur, rozmycie na obrazku

efekt blur, rozmycie na obrazku

Przykład zastosowania


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).

efekt koloru sepia na grafice

efekt koloru sepia na grafice

Przykład zastosowania


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.

efekt przezroczystości opacity

efekt przezroczystości opacity

Przykład zastosowania


Dodanie cienia efekt: drop-shadow

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

drop-shadow

drop-shadow

Przykład zastosowania


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 lub rozjaśnienie grafiki w zależności od tego jak dobierzemy nasze parametry.

brightness

brightness

Przykład zastosowania


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.

saturate

saturate



Efekt zamiany barw: hue-rotate

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

 

hue-rotate

hue-rotate



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.


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).

 


Efekt: contrast

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


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

safari

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:
safari

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

Mieszanie kolorów z selektorem mix-blend-mode [CSS]


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

Dodaj komentarz

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