CSS obrázkové filtre. Filtre CSS3: Upravte obrázky pomocou funkcií štýlov a syntaxe filtrov CSS

Dá sa to urobiť pomocou CSS bez akéhokoľvek skriptovania alebo predbežného spracovania. Áno, technológia nestojí na mieste :) Implementácia je veľmi jednoduchá a nevyžaduje ani použitie SVG, ktoré je v našej dobe populárne, v akejkoľvek forme.

Ako prefarbiť farbu písma na fotografii

Ak si pozorne prečítate MDN, približne pochopíte režimy prelínania a uvidíte rozdiely medzi nimi, hoci sú takmer všetky rovnaké. Biely text nad obrázkom nám dáva výsledok, ktorým je obrátený obrázok tam, kde ho text prekrýva. V prípade jednoduchých čiernobielych obrázkov sa čierna na pôvodnom obrázku zmení na bielu tam, kde je nad ňou biely text, a biela na pôvodnom obrázku sa zmení na čiernu, keď je nad ňou biely text.

Vezmime si napríklad primitívny HTML kód:

A pridajte k tomu nejaké primitívnejšie CSS:

Pozadie ( background: url(super_cat.jpg); width:800px; height:450px; ) h2 (color: #FFF; mix-blend-mode: different; font: 900 120px/120px Arial; text-align: center ) span ( display:block; font-size:80px )

Dopadlo to skvele aj bez Photoshopu! Veľkosť textu aj obrázka je možné zmeniť a efekt sa uloží bez potreby akéhokoľvek JavaScriptu alebo akýchkoľvek zmien v maskách CSS alebo SV. Ale je vhodný pre jednoduché obrázky. Pri zložitejších je potrebné aplikovať ďalšie filtre a miešať ich.

Môžeme napríklad pridať tento css filter do našej značky h2, aby sme vám pomohli:

H2 ( filter: invertovať(1) odtiene sivej(1) kontrast(9) )

Možnosti zdieľania filtrov sú obmedzené len vašou predstavivosťou a vkusom štýlu.

Funkcia invert() invertuje farby v obrázku. Vo svojej činnosti je to podobné, ako keby ste premenili fotografiu na negatív.

Syntax

filter: invertovať(<значение>);

Notový zápis

	Popis	Príklad
<тип>	Určuje typ hodnoty.	<размер>
A&&B	Hodnoty sa musia vydávať v určenom poradí.	<размер> && <цвет>
A | B	Označuje, že by sa mala vybrať iba jedna z navrhovaných hodnôt (A alebo B).	normálne | malé čiapky
A || B	Každá hodnota môže byť použitá samostatne alebo v kombinácii s inými v ľubovoľnom poradí.	šírka || počítať
	Hodnoty skupín.	[ plodina || kríž]
*	Opakujte nula alebo viackrát.	[,<время>]*
+	Opakujte jeden alebo viackrát.	<число>+
?	Zadaný typ, slovo alebo skupina je voliteľná.	vložka?
(A, B)	Opakujte aspoň A, ale nie viac ako B-krát.	<радиус>{1,4}
#	Opakujte jeden alebo viackrát oddelené čiarkami.	<время>#

hodnoty

Hodnota 0 ponechá obrázok tak, ako je. Hodnota 100 % alebo 1 úplne invertuje farby obrazu. Hodnoty od 0 % do 100 % alebo 0 až 1 čiastočne invertujú farby.

Záporná hodnota nie je povolená. Prázdna hodnota sa považuje za 0.

Pieskovisko

img ( filter: invert((( ihriskoValue ))% ); )

Príklad

Výsledok tohto príkladu je znázornený na obr. jeden.

Ryža. 1. Inverzia farieb. Vľavo je originál, vpravo fotka s filtrom

Poznámka

Chrome pred verziou 53, Opera pred verziou 40 a Safari pred verziou 9.1 podporujú vlastnosť -webkit-filter.

Špecifikácia

Každá špecifikácia prechádza niekoľkými fázami schvaľovania.

• Odporúčanie (Recommendation) – špecifikácia je schválená W3C a odporúčaná ako štandard.
• Odporúčanie kandidáta ( Možné odporúčanie) - skupina zodpovedná za štandard je spokojná, že spĺňa svoje ciele, ale na implementáciu štandardu je potrebná podpora vývojárskej komunity.
• Navrhované odporúčanie ( Navrhované odporúčanie) - v tejto fáze je dokument predložený poradnej rade W3C na konečné schválenie.
• Pracovný návrh – Vyzretejší návrh po diskusii a dodatkoch na posúdenie komunitou.
• Návrh editora ( Redakčný návrh) je návrhová verzia normy po zmenách, ktoré vykonali redaktori projektu.
• návrh ( Návrh špecifikácie) je prvou verziou návrhu normy.

Prehliadače

Prehliadače

V tabuľke prehliadača sa používa nasledujúci zápis.

Popis

Nastaví farbu alebo priehľadnosť prvku, nastaví aj rotáciu.

Syntax

filter: progid:DXImageTransform.Microsoft.BasicImage(možnosti)

možnosti

enabled Povolí alebo zakáže filter. Hodnota true filter povolí, hodnota false ho zakáže. grayScale Farby sa prevedú na odtiene sivej. 1 - sivé farby, 0 - zobrazenie pôvodných farieb. invertovať Invertuje farby prvku. 1 - invertovať farby, 0 - ponechať pôvodné farby. maska ​​Určuje, že určité farby by mali byť priehľadné. 1 - priehľadnosť sa mení pomocou parametra maskColor, 0 - zobrazenie pôvodných farieb. mascColor Nastavuje farbu použitú ako masku priehľadnosti obsahu prvku. Farba je špecifikovaná vo formáte 0xAARRGGBB, kde AA je hexadecimálna hodnota priehľadnosti, RR je červená zložka, GG je zelená zložka a BB je modrá zložka. zrkadlo Zrkadlia prvok. 1 - prevrátiť vodorovne, 0 - ponechať originál. opacity Nastavuje hodnotu priehľadnosti. 0 - úplná priehľadnosť, 1,0 - nepriehľadnosť prvku. rotácia Otočí prvok. 0 - východisková poloha, 1 - otočenie o 90° v smere hodinových ručičiek, 2 - otočenie o 180°, 3 - otočenie o 270°. xray Farby sú prevedené na odtiene sivej s invertovanými farbami.

Parametre vo filtri sú uvedené oddelené čiarkami v ľubovoľnom poradí.

HTML5 CSS2.1 IE Cr Op Sa Fx

Výsledok tohto príkladu je znázornený na obr. jeden.

Ryža. 1. Pomocou parametra xray

Prehliadače

V IE6 a IE7 sa filtre aplikujú iba na prvky, ktoré majú príponu .

Internet Explorer 9 nepridáva filtre do prvkov pri tlači dokumentu.

Filtre CSS3 sú veľmi zaujímavou odnožou SVG, ktorá vám umožňuje upravovať prvky a obrázky HTML použitím rozmazania, jasu a ďalších. V tomto návode sa rýchlo pozrieme na to, ako presne fungujú.

Ako to funguje?

Iba pomocou CSS môžeme vytvoriť pomerne zložité efekty. Môžu byť použité na obrázky aj prvky HTML. Vlastnosť, ktorá sa používa na ovládanie všetkých týchto efektov, je filter.

filter: filter(hodnota) ;

Ako sa dalo očakávať, táto vlastnosť vyžaduje použitie predpony prehliadača. Ale zatiaľ len -webkit-(Chrome a Safari) je jediný nástroj prehliadača, ktorý podporuje túto vlastnosť.

Webkit-filter: filter(hodnota) ;
-moz-filter: filter(hodnota) ;
-o-filter: filter(hodnota) ;
-ms-filter: filter(hodnota) ;

Filtrácia

Existuje niekoľko filtrov, takže pre lepšiu predstavu o každom z nich sa na ne pozrime jeden po druhom. Na ten istý prvok (oddelené medzerou) možno použiť viacero filtrov, napr. jas a rozmazať:

filter: rozostrenie(5px ) jas(0,5 ) ;

Existuje niekoľko filtrov, ktoré nebudú uvedené nižšie, ale dajú sa ľahko implementovať pomocou už existujúcich CSS (priehľadnosť a tiene). Tu je pôvodný obrázok, ktorý použijeme na demonštráciu fungovania filtrov:

Fotografiu s aplikovaným filtrom (prvá fotografia) a výsledok filtra zobrazím ako statický obrázok (druhá fotografia), ak používate prehliadač, ktorý nepodporuje filtre a nevidíte výsledok.

Rozmazať

Vždy ste chceli vytvoriť gaussovské rozostrenie pre obrázok alebo text iba pomocou jedného CSS? S filtrami to dokážete! Rozmazanie sa meria v pixeloch, takže môžete urobiť niečo takéto:

filter: blur(5px ) ;
// Špecifické pre prehliadač
-webkit-filter: blur(5px) ;
-moz-filter: blur(5px ) ;
-o-filter: blur(5px ) ;
-ms-filter: blur(5px) ;

Jas

Jas sa meria od nuly do jednej, 1 je plný jas (biela) a 0 je počiatočný jas.

filter: jas(0,2 ) ;
// Špecifické pre prehliadač
-webkit-filter: jas(0,2) ;
-moz-filter: jas(0,2 ) ;
-o-filter: jas(0,2 ) ;
-ms-filter: jas(0,2 ) ;

Sýtosť

Sýtosť sa meria v percentách.

filter: nasýtený (50%) ;
// Špecifické pre prehliadač
-webkit-filter: saturate(50%) ;
-moz-filter: nasýtený(50%) ;
-o-filter: nasýtený (50%) ;
-ms-filter: nasýtený(50%) ;

Rotácia tónov

Tento filter vám umožňuje zmeniť tón otáčaním (spomeňte si na farebné koliesko, ktoré potom otáčate). Meria sa v stupňoch.

filter: hue-rotate (20deg) ;
// Špecifické pre prehliadač
-webkit-filter: hue-rotate(20deg) ;
-moz-filter: hue-rotate(20deg) ;
-o-filter: hue-rotate (20deg) ;
-ms-filter: hue-rotate(20deg) ;

Kontrast

Kontrast sa opäť meria v percentách. 100 % je predvolená hodnota, 0 % vytvorí úplne čierny obrázok. Čokoľvek nad 100 % pridáva kontrast!

filter: kontrast(150% ) ;
// Špecifické pre prehliadač
-webkit-filter: kontrast (150% ) ;
-moz-filter: kontrast(150% ) ;
-o-filter: kontrast(150% ) ;
-ms-filter: kontrast(150% ) ;

Inverzia

Tiež merané v percentách. Dostupné hodnoty sú od 0 % do 100 %. Napodiv, v súčasnosti webkit nepodporuje inverzie, ktoré sú menšie ako 100 %.

filter: invert(100%) ;
// Špecifické pre prehliadač
-webkit-filter: invert(100% ) ;
-moz-filter: invertovať (100% ) ;
-o-filter: invertný (100% ) ;
-ms-filter: invertovať (100%) ;

Bielenie

Opäť zadajte percento, o ktoré chcete desaturovať obrázok. Dostupné hodnoty sú od 0 % do 100 %.

filter: odtiene šedej(100% ) ;
// Špecifické pre prehliadač
-filter webkitu: v odtieňoch sivej(100% ) ;
-moz-filter: odtiene šedej(100% ) ;
-o-filter: odtiene šedej(100% ) ;
-ms-filter: odtiene šedej(100% ) ;

Sépia

Myslím, že je to veľmi užitočné, ak chcete niečo zverejniť na Instagrame. Aj keď predpokladám, že na to nebudete používať CSS. V každom prípade vám tieto odtiene šedej a negatívy v súčte umožnia pridať do obrázka sépiu. 100 % je dokončená sépia, 0 % je pôvodný obrázok.

filter: sépia(100% ) ;
// Špecifické pre prehliadač
-webkit-filter: sépia(100% ) ;
-moz-filter: sépia(100% );
-o-filter: sépia (100% );
-ms-filter: sépia(100% );

Podpora prehliadača

	Webkit	Mozilla	Trojzubec	Presto
Rozmazať	experimentálne	nie	nie	nie
Jas
Sýtosť
Rotácia tónov
Kontrast
Inverzia	Iba plná inverzia
Bielenie	experimentálne
Sépia

Ak máte nejaké otázky, použite náš