Jak stworzyć: dodaj efekty obrazu

Naucz się, jak dodać efekty wizualne do obrazów.

filtry obrazów

Spróbuj sam

CSS Filters

CSS filter Atrybuty dodają efekty wizualne do elementów (np. rozmycie i nasycenie).

Uwaga:Internet Explorer, Edge 12 lub Safari 5.1 i wcześniejsze wersje nie wspierają filter atrybuty.

przykład szarości

Zmień kolor wszystkich obrazów na czarno-biały (100% szarość):

Tulip
oryginalne zdjęcie
Tulip
szarość (100%)
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Spróbuj sam

przykład rozmycia

Zastosuj efekt rozmycia do wszystkich obrazów:

Tulip
oryginalne zdjęcie
Tulip
rozmycie (5 pikseli)
img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

Spróbuj sam

Strony związane

Podręcznik:Atrybut CSS filter