Jak fungují CSS Filtry obrázků?
Vlastnost filter v CSS poskytuje přístup ke grafickým efektům přímo v prohlížeči, které byly dříve doménou pouze grafických editorů (jako Adobe Photoshop). Místo toho, abyste pro web vytvářeli dvě různé verze obrázku (například jednu barevnou a jednu černobílou), použijete pouze jednu fotografii a vzhled dynamicky měníte pomocí kódu. Tím ušetříte datový tok a zrychlíte načítání webu.
Nejčastější využití v praxi
- Rozostření a ztmavení pro text (Hero sekce): Velmi často se používá kombinace
blur()abrightness(50%)na fotce, přes kterou je položen bílý text (nadpis webu), aby byl text snadno čitelný. - Černobílé obrázky na míru (Hover efekt): Běžná praxe pro sekci "Náš tým" nebo "Loga partnerů". Obrázky mají nastaveno
grayscale(100%). Až když na ně uživatel najede myší (:hover), filtr se odstraní a obrázek se plynule vybarví. - Barevné sjednocení: Pomocí
sepia()nebohue-rotate()můžete sjednotit různorodé fotky do jednotného tónu, který odpovídá barvám vaší značky.
Mají filtry vliv na výkon webu?
Ano, avšak minimální. Většina moderních prohlížečů zpracovává CSS filtry pomocí grafické karty (hardwarová akcelerace). Jediný filtr, se kterým byste měli šetřit u velkých a dynamických prvků, je blur (rozostření), který je na výpočet matematicky nejnáročnější.