Screencasts video 2025, Ianuarie

Vă mulțumim că ați urmărit toată lumea, înseamnă totul pentru mine și pentru acest site. Această postare pe blog este o listă uriașă de resurse pentru tot ceea ce am acoperit în această serie "

Când utilizați inline, toate elementele se află în DOM, la fel ca s și s și orice alt element HTML. Dacă aveți SVG ca: și faceți: var rect = "

În acest screencast, cercetăm articolul lui Léonie Watson despre SVG accesibil și îl parcurgem punct cu punct. Îmi place că primul punct "

Am petrecut mult timp vorbind despre utilizarea inline și a elementului. Puteți construi un sistem de pictograme cu acelea pline de avantaje. Poți crea „

Puteți face multe lucruri cu SVG fără niciun software. Presupunând că aveți o sursă bună de imagini SVG online, le puteți folosi direct. Dar"

JavaScript este ultimul mod în care vom aborda animarea SVG. Ne-am uitat la CSS, care este minunat și destul de confortabil, dar nu poate face un număr de SVG "

Conceptul de tăiere și mascare este destul de simplu. Ascundeți anumite părți ale elementelor și arătați altele. Diferența reală dintre ele este destul de simplă "

Poate ați auzit de filtrele CSS? Le puteți aplica pentru orice element din CSS, cum ar fi: .apply-css-filter (-webkit-filter: scala de gri (0.5); filter: "

Probabil că nu există un caz de utilizare extrem de imens, în afară de evident: aveți nevoie, printre altele, de un grafic raster într-un design SVG mai mare. "

S-ar putea să vină o zi în care îți dorești ca o imagine să fie SVG, dar o ai doar în raster, cum ar fi GIF, JPG.webp sau PNG. În acest videoclip ne uităm la un exemplu "

O tehnică populară de animație SVG este desenarea traseului. Dacă nu vă puteți imagina, iată o colecție de câteva miliarde de exemple pe care le-am creat. În esență „

Există un element în SVG. Nici o mare surpriză aici: este pentru a introduce text în SVG. Nu contururi de forme ale literelor (deși și tu poți face asta), ci „

Acesta este un pic esoteric al unui lucru, am avut nevoie doar să-l fac singur o dată și mi s-a părut confuz, așa că m-am gândit să fac un videoclip întreg pe el. Lucrul este,"

Videoclipul a fost eliminat pe acesta. O să-l re-filmez cândva curând. Dacă citești acest lucru și încă nu l-am făcut, nu ezita să mă contactezi și să mă înșeli ”

Acest sfat se aplică numai dacă aveți Adobe Illustrator CC (Creative Cloud). Am confirmat că funcționează în acel sau chiar mai nou CC 2014. Este cât se poate de simplu "

Chiar dacă animarea SVG cu CSS ar putea fi mai confortabilă pentru o persoană front-end medie, SVG are un alt mod în care animația este încorporată chiar în SVG "

Când utilizați SVG inline, tot acel cod SVG este corect în HTML și, prin urmare, în DOM. Le puteți stiliza exact așa cum ați face un, sau orice alt HTML "

Am aflat că o limitare a utilizării pentru a insera un pic de SVG este că nu puteți scrie selectoare CSS compuse care afectează acolo. De exemplu: „

Termenul „instrument de construire” ar putea fi înfricoșător. Îmi aduce în minte instrumente de linie de comandă fanteziste care necesită configurare și dependențe de sistem ciudate care se rup când "

Inline SVG poate fi „stilat” în sensul că are deja umpluturi și linii și care nu este în secunda în care l-ați pus pe pagină. Asta e minunat și un total "

Site-urile cu fotografii de stoc au întotdeauna o modalitate de a filtra rezultatele căutării după „vector”. Și nu uitați, indiferent de formatul pe care îl obțineți atunci când descărcați ceva "

Am aflat că instrumentele de construcție sunt deosebit de minunate pentru sarcini precum transformarea unui folder plin de SVG într-un bloc de definiții SVG. Așa cum se întâmplă întotdeauna în „

Cu siguranță putem deveni un pic mai tocilari cu instrumentele noastre de construcție. La momentul postării acestui lucru, posterul instrumentelor de construcție este Grunt. Există concurenți "

Odată ce avem ceea ce numim „blocul nostru de defs” al SVG - acea bucată de SVG care definește toate lucrurile pe care vrem să le desenăm mai târziu - unde o punem? Asa de"

Elementul este cuplat la această idee întreagă a unui sistem de pictograme SVG în linie. Am aflat că o modalitate curată de a face acest lucru este să puneți tot ce intenționați să desenați mai târziu "

Punerea acelui bloc SVG în partea de sus a documentului funcționează cu siguranță. Are și câteva avantaje, cum ar fi faptul că nu trebuie făcută nicio cerere HTTP "

SVG are un element foarte tare și puternic numit. Este destul de simplu ca concept. Găsește un alt bit de cod SVG, la care se face referire prin ID și îl clonează peste "

Am acoperit „SVG inline” - care renunță la sintaxa SVG direct în HTML. Puteți utiliza același SVG în linie și în alte locuri, cum ar fi într-un sau „

Amintiți-vă că orice vector puteți obține în SVG. Software-ul Adobe este excelent în acest sens. Ar putea exista elemente vectoriale într-un PDF - doar deschideți PDF-ul și veți "

Noun Project este un loc (foarte) fantastic de unde puteți obține SVG. Haideți să numărăm căile Literalmente totul în SVG și de fapt vine așa Ei sunt "