Rozmazání obsahu

Podobně jako u průhlednosti nebo otáčení panuje i u rozmazávání nejednotnost napříč prohlížeči.

CSS vlastnost filter je zajímavá tím, že ji velmi odlišně podporují prohlížeče Internet Explorer (už od prastaré verse 4 do IE9) a současné prohlížeče.

IE 9 a starší

Jak filtry fungují v těchto Explorerech je popsáno na JPW včetně živých příkladů (screenshot z IE 9). Tedy je vidět, že funguje i kýžený filtr pro rozmazání:

element {
  filter: blur;
}

Filtry ve starších IE se dost špatně testují. IETester ani přepnutí režimu v Internet Exploreru 10 neodpovídá skutečnému IE.

Chrome

Ukázka

Chrome (a jiné prohlížeče založené na Webkitu) podporují novou podobu CSS vlastnosti filter (zatím s prefixem). Rozmazání potom vypadá následovně:

element {
  -webkit-filter: blur(2px);
}

Hodnota v závorkách stanovuje intensitu romazání. Lze očekávat, že tento postup by v budoucnu mohly podporovat všechny prohlížeče.

Firefox

Ukázka

Firefox (jádro Gecko) podporuje vytvoření filtru v SVG (stačí umístit do HTML kódu nebo přes protokol data:):

<svg>
    <filter id="rozmazany-filtr">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>

A následně filtr připojit přes CSS zápis:

element { filter: url(#rozmazany-filtr) }

Výše uvedené způsoby pro Gecko a Webkit lze spojit a filtr pro IE9 (a starší IE) připojit podmíněným komentářem.

Internet Explorer 10 a Opera 12

Tyto prohlížeče umí rozmazávat jen přímo SVG elementy, popř. <image> obrázky. Situace je stejná jako u černobílého filtru. Při trochu jiném zápisu rozmazávacího filtru zafunguje shození IE 10 do staršího režimu:

<meta http-equiv="X-UA-Compatible" content="IE=9">

Filtr:

filter:progid:DXImageTransform.Microsoft.Blur(pixelradius='2', shadowopacity='0.0');

Ukázka (Měla by kromě Opery fungovat všude.)

Jiné způsoby rozmazávání

Stín

Stačí-li rozmazat jen písmo, docílí se toho i vlastností text-shadow (funkční od IE 10).

Duplikování elementu

Pokud se obsah k rozmazání několikrát naklonuje a s průhledností umístí vždy s lehkým posunem, získáme tak rovněž efekt rozmazání.

Duplikování obsahu by s ohledem na smysluplnost HTML kódu měl dělat JavaScript.

Ukázka

Odkazy

• DJPW: Windows Aero Effect na webu – jak na to?
• Vlastnost filter v DevDocs
• Motion Blur Experiment – rozmazání elementu při jeho přesunutí