[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 efekt rozmycia dzięki filtrowi Gaussa. Filtr ten daje możliwość jaką niektórzy mogą znać z programów graficznych. Aby uzyskać takie rozmycie na stronie www stosuje się właściwość CSS - filter: blur(), gdzie w nawiasach podajemy promień rozmycia w pikselach (0 oznacza brak rozmycia).

Przykład

Spójrz na poniższe obrazy. Pierwszy z nich to oryginał 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: 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?

[C++] Jak obliczyć pole i obwód trapezu?

[PHP] Jak pobrać adres strony?