Mobilné Správy, Gadgety, Blogy's Secenziami

Top 10 zdrojov SVG filtra a návody

SVG alebo škálovateľná vektorová grafika majú oproti bežným formátom obrázkov veľkú výhodu: sú nekonečne škálovateľné, čo znamená, že nedochádza k zhoršeniu kvality, bez ohľadu na to, aký veľký alebo malý je obrázok.

SVG sa však nepoužíva iba na obrázky. Filtre SVG môžete použiť na manipuláciu s obrázkami a textom a na aplikovanie skvelých efektov. V tomto príspevku sme zostavili najzaujímavejšie filtre SVG a návody filtrov SVG, ktoré môžete študovať a potom použiť na svoje návrhy.

Môže sa vám tiež páčiť: Knižnice a nástroje na filtrovanie obrázkov CSS.

Filtre SVG 101

Prvý tutoriál na zozname je vynikajúcim úvodným materiálom pre filtre SVG. Tento návod vás prevedie procesom použitia filtrov SVG vo vašich vlastných dizajnoch a je súčasťou väčšej série, ktorá sa ponorí do filtrov SVG.

Umenie filtrov SVG

Tento článok časopisu Smashing Magazine sa ponorí hlboko do sveta filtrov SVG a vysvetľuje, prečo by ste ich mali používať vo svojich vlastných dizajnoch. Obsahuje tiež niekoľko základných príkladov filtrov SVG použitých na rôzne textové prvky.

Výučba Umenie filtrov SVG

Textové filtre SVG

Toto je ďalší návod, ktorý vám ukáže, ako aplikovať filtre SVG na váš text. Výukový program vás prevedie procesom vytvárania filtra SVG a dokonca zdieľa nástroj, ktorý uľahčuje vytváranie filtrov SVG.

Vrhané tiene SVG

Tento malý útržok rýchleho kódu vám umožní pridať zahodený tieň do ľubovoľného objektu na vašej stránke. Ukazuje vám, ako filter funguje, a potom poskytuje vzorový kód, ktorý môžete upraviť podľa svojich predstáv.

Výukový program SVG Drop Shadows

Efekty rozostrenia SVG

Podobne ako v predchádzajúcom príklade, aj tento útržok kódu vás naučí reprodukovať efekty rozostrenia vo vašich obrázkoch pomocou filtrov SVG. Môžete upravovať kód a hrať sa so svojimi možnosťami, aby ste sa naučili, ako to funguje, a potom ho použiť na svoje návrhy.

Výukový program filtrov efektu rozmazania SVG

Lepivý efekt

V tomto návode sa naučíte, ako vytvoriť cool a jedinečný efekt a použiť ho v ponuke. Tento filter SVG zaistí, aby váš projekt vynikal, takže sa pozrite na príručku a naučte sa, ako aplikovať tento efekt na vaše návrhy.

Výukový program na SVG filtri Gooeyovho efektu

SVG filtre

Aj keď nejde o výučbu, tento zdroj obsahuje zoznam všetkých prvkov potrebných pre filtre SVG a slúži ako skvelý referenčný bod, keď ste s nimi pripravení experimentovať podľa svojich vlastných návrhov. Nasleduje referenčný zoznam rôznych filtrov SVG, ktoré možno použiť na text, obrázky a ďalšie.

Maskovaný efekt rozmazania

Naučte sa, ako vytvoriť zaujímavý maskovaný efekt rozmazania v tomto návode. Skvelý spôsob, ako na webe oživiť prvky hlavičky alebo paralaxy.

Sprievodca filtrom SVG s maskovaným rozmazaním

Praktické filtre SVG

Toto je ďalší podrobný návod, ktorý vám poskytuje dobrý prehľad o tom, čo sú filtre SVG a ako ich používať. Obsahuje aj praktické príklady, ktoré môžete okamžite uplatniť pri svojich návrhoch.

Výukový program pre filtre svetelného zdroja SVG

Ak chcete na svoj dizajn aplikovať cool svetelný efekt, tento návod nevynechajte. Naučíte sa, ako aplikovať svetelný efekt a manipulovať s ním pomocou troch rôznych svetelných efektov.

Výukový program pre filtre svetelného zdroja SVG Výukový program pre filtre SVG

záver

Filtre SVG poskytujú komplexnú sadu filtrov, ktoré môžu pridať hĺbku každému dizajnu. Navyše ich môžete použiť na ľubovoľný prvok DOM pomocou tútorských tutoriálov v tomto príspevku a hlavných filtrov SVG pre svoje vlastné rozloženia.

Table of Contents