Czarno-biały efekt w css

© Islands by SnowSkadi

Jak widzicie, po najechaniu kursorem na obrazek, ten staje się czarno biały. Jest to możliwe dzięki właściwości filter, która zastępuje proste funkcje programów graficznych, między innymi sprawianie, by obrazek (a dzięki cssowi dowolny element strony) stał się czarno-biały.
-webkit-filter: grayscale(1);
filter: grayscale(1);
Niestety poza Mozillą wszystkie przeglądarki potrzebują prefiksu -webkit-, aby zinterpretować tę właściwość, dlatego należy stosować oprócz ogólnej wersji kodu, także tę poprzedzoną prefiksem. Wartość filter składa się z nazwy funkcji (w tym przypadku grayscale) oraz liczby w zakresie od 0 do 1, która określa intensywność funkcji. Dzięki temu możliwe jest jedynie lekkie poszarzenie obrazka przy stosowaniu następującej opcji:
-webkit-filter: grayscale(0.5);
filter: grayscale(0.5);
Właściwość filter ma kilka wartości - różnego rodzaju filtrów, których intensywność również można zdefiniować. Myślę, że jeszcze wartą uwagi funkcją jest blur, które powoduje rozmycie się danego elementu, a intensywność tego rozmycia podaje się w pikselach.

© Islands by SnowSkadi

-webkit-filter: blur(3px);
filter: blur(3px);
Pod tym linkiem znajdziecie pozostałe wartości filter: klik. Życzę miłego bawienia się z suwakami i tworzenia niesamowitych efektów. Nie zapomnijcie tylko zapisać kodu css zarówno z prefiksem jak i bez niego.

A oto kody na efekty użyte w tym poście. Najpierw efekt czarno-białego obrazka: img:hover{
transition:0.5s;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
A teeraz efekt rozmytego obrazka: img:hover{
transition:0.5s;
-webkit-filter: blur(3px);
filter: blur(3px);
}
Mam nadzieję, że ten wpis wam się przydał!