[CSS] Rozmycie gaussowskie

Rozwój CSS oraz coraz to nowsze wersje przeglądarek internetowych dają nam nowe możliwości "upiększania stron www". Jedną z takich możliwości jest rozmywanie obrazu poprzez filtr Gaussa. Filtr ten daje możliwość jaką niektórzy mogą znać z programów graficznych. Aby uzyskać takie rozmycie grafiki na stronie www stosuje się właściwość CSS - filter z wartością blur(), gdzie w nawiasach podajemy promień rozmycia w pikselach (0 oznacza brak efektu).

Przykład

Spójrz na poniższe obrazy. Pierwszy z nich to oryginalny obraz bez żadnych filtrów, na drugim zaś zastosowano rozmycie gaussowskie o promieniu 5px.
Rozmycie gaussowskie Rozmycie gaussowskie Podsumowując, aby otrzymać efekt rozmycia na obrazie używamy reguły CSS: -webkit-filter: blur(5px);filter: blur(5px), gdzie oczywiście wartość promienia ustalamy wedle własnych potrzeb. Dla wsparcia przeglądarek na silniku WebKit należy pamiętać o prefiksie -webkit-.

Komentarze

Popular

[HTML] Jak wstawić obrazek?

[PHP|HTML] Odświeżenie strony

[HTML] Jak wycentrować stronę?