Pobierz szablon, rozpakuj go i dodaj na swojego bloga.

Czarno-biały efekt w css

Edytuj post

© 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ł!

5 komentarzy

  1. Całkiem ciekawe, nawet nie wiedziałam, że tak można!
    Na pewno kiedyś to wykorzystam!

    OdpowiedzUsuń
  2. Jest tego dużo więcej. Polecam zajrzeć:
    https://developer.mozilla.org/en-US/docs/Web/CSS/filter :)

    OdpowiedzUsuń
    Odpowiedzi
    1. W poście też jest link do nich wszystkich, tyle że na innej stronie ;) Niepotrzebnym mi się wydawało opisywanie każdego efektu, skoro stosuje się je prawie identycznie.

      Usuń
    2. O, faktycznie. Nie zauważyłam. ;D

      Usuń
    3. Nic się nie stało :)

      Usuń

© Agata | WS | x.