8 A legmodernebb CSS-funkciók (és hogyan kell használni őket)

A CSS folyamatosan fejlődik, és számos izgalmas új funkciót adtak hozzá, hogy a specifikáció még erősebb fegyvert tegyen egy webes tervező eszköztárában.

A CSS-rács elrendezi az új szinteket, amelyeket korábban nem látnak, az egyéni tulajdonságok bemutatják a változók fogalmát, miközben a böngésző támogatásának ellenőrzése. A média lekérdezések új hozzáférési tulajdonságokkal rendelkeznek, a változó betűtípusok maximális kreativitást kínálnak a minimális kódolással, míg a Scroll Paping kiküszöböli a JavaScript szükségességét. Nézze meg a hűvös CSS animáció Példák, hogy lássuk, mit hozhat létre. Vagy, hogy egy webhelyet kód nélkül kiépítsük Website Builders .

Azok számára, akik kreatívak, CSS formák vannak az egyedi elrendezésekhez és számos keverékmódhoz és szűrőhöz, hogy bemutassák a Photoshop stílusú tervezési hatásokat. Olvassa el, hogy megtudja, hogyan lehet használni ezeket a must-prob funkciókat a legújabb építőkben. De ne feledje, egy összetett weboldal azt jelenti, hogy szüksége van egy web hosting szolgáltatás, amely támogathatja az Ön igényeit.

01. Egyéni tulajdonságok

Ha olyan előfeldolgozót használsz, mint a SASS, Valóban egy olyan programozási nyelv, mint a JavaScript, akkor kétségtelenül megismerkedni a változók fogalmával - az újrafelhasználásra definiált értékek. Egyéni tulajdonságok lehetővé teszik számunkra, hogy ezt a CSS-ben, az előfeldolgozók nélkül. A változók a következőkön állíthatók be: gyökérszint (globális változók létrehozása) vagy egy választón belül. Ezután a szintaxis segítségével hívják var (-> - myvariablename). Például beállíthatunk egy változót -PrimaricColor mint ez:

 / * a gyökérelemen (globális
változó) * /
: gyökér {
- -PrimarColor: # F45942;
}
/ * Scoped egy választóhoz * /
.my-komponens {
- -PrimarColor: # 4171F4;
} 

Most ezt a változót ingatlanértékként használhatjuk:

 H1 {
Szín: var (- -primariccolor);
} 

Az egyéni tulajdonságok öröklődnek, ami nagyon hasznos következményekkel jár. Az egyik ez a temetés. Vegyük a fenti példát: Megadhatunk egy globális változót (# F45942 - fényes narancssárga piros) -PrimaricColor A gyökér szinten, így minden olyan esetben, ahol ezt a változót használjuk, az érték piros lesz. De ugyanazt a változót is újradefiniáljuk egy választón belül, más értékkel (# 4171F4 - közepes kék). Tehát minden olyan esetben, ahol a -PrimaricColor A választógombon belüli változó, a számított érték kék lesz.

Alapértelmezések beállítása

A változók sztrájkolása nagyszerű tulajdonság, de az, amely alkalmanként elkapja! Ha megpróbálja használni a még nem meghatározott változó használatát, akkor a kapott érték vissza fog térni a böngésző alapértelmezettjéhez, vagy örökölt értékhez, nem pedig egy változó, amely a kaszkád továbbfejlesztett. Bizonyos esetekben helyénvaló alapértelmezett érték beállítása:

 H1 {
Szín: var (- -primarycolor, kék);
} 

Hogyan különböznek az egyéni tulajdonságok az előfeldolgozó változóktól?

Az egyéni tulajdonságok néhány kulcsfontosságú módon különböznek az előfeldolgozó változóktól. Az előfeldolgozó változókat a kód elküldése előtt állítják össze. A böngésző soha nem látja, hogy az érték egy változó, csak a végeredményt látja. Az egyéni tulajdonságokat a böngészőben kiszámítják. A modern fejlesztői eszközökben ellenőrizheti őket, változtassa meg a változót, és nézze meg a megoldott értéket. Ezek dinamikus változók, azaz értékeik megváltoztathatók a CSS-en belül, vagy a JavaScript futási ideje alatt.

Ellentétben előfeldolgozó változók, egyedi tulajdonságokat nem lehet használni a választó nevét, ingatlan gombokkal vagy a média lekérdezés nyilatkozatok - csak CSS tulajdonság értékeit. CSS preprocessors még rengeteg előnnyel jár, így valószínű, hogy látni őket ragasztás körül egy ideig, de akkor valószínűleg gyakrabban kombinálva egyedi tulajdonságait.

02. Jellemzői lekérdezések

Feature lekérdezések olyan módon, hogy vizsgálni kell, hogy a böngésző támogatja egy adott CSS tulajdonság-érték kombinációja belül a CSS fájlban. Gyakorlatilag eltávolítják a funkciókérzékelő könyvtárak szükségességét, mint a Modernizr. A szintaxis hasonló a média lekérdezéséhez: az AT-REG-t használod @supports , ezt követi az ingatlanértékpár, a végrehajtandó kód csomagolása esetén, ha a böngésző megfelel a megadott feltételeknek.

A funkciók lekérdezései jól támogatottak a modern böngészőkben, de viszonylag újak, és egy "Gotcha" az, hogy néhány böngésző, amit érdemes tesztelni, esetleg nem támogatja a funkciók lekérdezéseit. Gyakran a legjobb módja annak, hogy kezelje ezt az, hogy először a böngészőstílusok (a funkciók lekérdezésével kívül), majd csomagolja be a fejlesztéseit a böngészők támogatására a @supports szabály.

Legyen tudatában, a funkciók lekérdezései csak takarékosan használhatók. A CSS egyik nagy funkciója az, hogy a böngészők egyszerűen figyelmen kívül hagyják azokat a tulajdonságokat vagy értékeket, amelyeket nem értenek. A legjobb, ha csak olyan funkciók lekérdezését alkalmazzák, ha nem teszik meg, akkor vizuális hibát okozna, különben sok extra munkára állhat.

A funkciók lekérdezéseinek használata

Az egyetlen tulajdonság értékének teszteléséhez először meg tudjuk adni a visszaesést. Ebben a példában egy flexbox-eltartást biztosítunk olyan böngészők számára, amelyek nem támogatják a rács elrendezését.

 .my-komponens {
Kijelző: rács;
}
@supports (kijelző: rács) {
.my-komponens {
Kijelző: FLEX;
}
} 

03. Média lekérdezések

Valószínűleg hozzászokik a média lekérdezések használatához a nézetablak szélességének és magasságának felismerése érdekében, valamint a média típusát (leggyakrabban a képernyő vagy a nyomtatás). Az 5-ös méretű média lekérdezés specifikáció néhány újabb médiafunkciót hoz nekünk (adott esetben) teszthez, amelyeket néhány böngészőben már támogatott. Ezek nagy előnyökkel járnak az akadálymentesség érdekében.

A vestibularis rendellenességekkel rendelkező felhasználók és azok, akik mozgásban szenvednek, nem értékelik a weboldalakat sok mozgással, például animációkkal és parallaxis görgetési hatásokkal. A prefer-csökkentett média lekérdezést használva olyan felhasználókat tudunk biztosítani, akik csökkentett alternatívát választanak ki.

 .my-elem {
Animáció: rázza meg az 500ms könnyedén-in-out 5;
}
@Media (prefer-csökkentett mozgás: csökkenti) {
.my-elem {
Animáció: Nincs;
}
} 

Ez egyre népszerűbb lesz a webhelyek számára, hogy alternatív sötét témát biztosítson. A prefer-színek-séma lehetővé teszi számunkra, hogy lekérdezzük, hogy a felhasználó rendszerszintű preferenciát állított be (a sötét, fény vagy nem preferencia kulcsszavai segítségével), és ennek megfelelően mutatja be a megfelelő színsémát.

 / * média lekérdezések 02 * /
test {
Háttér: Lineáris-gradiens (a
alsó, # b5faff, # ffe2b4);
}
@Media (prefer-color-séma: sötét) {
test {
fehér szín;
Háttér: Lineáris-gradiens (a
alsó, # 0c1338, # 3E3599);
}
} 

04. Változó betűtípusok

Általában, ha több különböző betűtípust szeretne felvenni a családunk weboldalunkon, ugyanazokat a betűfájlokat kell betöltenie. A betöltött betűtípus-fájlok, annál nagyobb súlyt adsz hozzá az oldalához, a teljesítményre gyakorolt ​​hatással - így általában bölcs, hogy betöltsön maximum három vagy négy betűtípus fájlt (a teljesítmény költségvetésétől függően).

A változó betűtípusok mindent megváltoztatnak. Ezek lehetővé teszik számunkra, hogy betöltsünk egy betűtípusfájlt egy teljes betűtípus-családhoz. Bár ez a fájl általában nagyobb, mint egy betűtípus, ha szeretné kihasználni a különböző súlyokat és stílusokat, akkor a változó betűtípus az előzőbb megoldás. Ha vásárolt egy egész betűtípust, ne feledje, hogy biztonságosan megragadja felhő tároló Tehát nem veszíti el a fájlokat!

Variációs tengely

Nem csak ez, hanem változó betűtípusokkal, nem korlátozódunk a betűtípusok kis részhalmazára. Amikor dolgozik rendszeres betűtípusok, a rendelkezésre álló betűtípus súlyokat többszörösei 100. Jellemző, 400 lehet a szokásos vastagságú, 300 a könnyű súly, és 700 a merész tömeg - különböző családok, amely több súlyt, vagy kevesebb. A változó betűtípusok változata tengelye van, amely számos olyan értéket biztosít a tulajdonságokhoz, mint a betűtípus súlya. A betűtípusnak 1-900-as tengelye lehet, amely 900 különböző súlyhoz férhet hozzá!

A variáció tengelye nem csak a súlyra korlátozódik. A változó betűtípusok eltérő tengelyekkel rendelkezhetnek az X-Magassághoz, a ferde, a serif hosszúsághoz és a kontraszthoz (csak néhány példa kiválasztásához) - ami azt jelenti, hogy egyetlen betűfájl több száz, vagy akár több ezer variációhoz juthat. Még az animálhatjuk ezeket a tulajdonságokat, lehetővé téve számunkra, hogy elérjünk néhány igazán hűvös hatást. Mandy Michael ( https://codepen.io/mandymichael ) Van egy teljes terhelés kreatív demó, amely igazán teszteli a határokat.

Böngésző támogatja a változó betűtípus elég jó, és sok betűtípus öntés aktívan fejlődő új változó betűtípusok, hogy akkor kezdi el használni most - bár ezek gyakran jönnek a prémium, különösen a több teljes szolgáltatást betűcsaládokról. Ha csak azt szeretné, hogy kezdjen el játszani a változó betűtípusokkal, hogy megnézze, mit tehetnek, számos változó betűtípus:

Legyen tudatában van, ha változó betűtípusokat szeretne használni most, meg kell győződnie arról, hogy naprakész operációs rendszert használ - nem fog működni az idősebb OSS-en.

Font-változat-beállítások

Miközben könnyedén megváltoztathatjuk a betűtömeget betűtípus CSS tulajdonság, Font-változat-beállítások egy új tulajdonság, amely teljes hozzáférést biztosít a betűtípus különböző változási tengelyeihez. Ezek közé tartoznak mind a regisztrált tengelyek, mind az egyéni tengelyek.

Regisztrált tengelyek

Öt különböző regisztrált tengely létezik, amelyek megfelelnek a különböző CSS tulajdonságoknak. Mindegyiküknek "tengelycímke" néven ismert. A regisztrált tengelyek: pohár (font-súly), wdth (font-szakasz), slnt (Font-style: ferde / szög), iTal (Font-Style: Italic), hadművelet (Font-optikai méretezés). Ezeket a tengelyeket a CSS tulajdonság, vagy a Font-változat-beállítások .

Ezek a tengelyek nem feltétlenül tartoznak minden változó betűtípusban (egyesek csak egy vagy két tengelye lehet), de valószínűleg a leggyakoribbak.

Egyéni tengelyek

Az egyéni tengelyek a betűtípus tervező által tartalmazott tengelyek, amelyek egyáltalán nem lehetnek. Ezek magukban foglalhatják (például) Serif hosszúság, X-Magasság, még valami kreatívabb (és kevésbé tipikusan jellemző), mint a forgás.

Mindkét tengelyt négy karakteres címkével kell kifejezni. A regisztrált tengelyeknek kisbetűsnek kell lenniük, míg az egyéni tengelyek nagybetűsek. Mindkettő kombinálható a betűtípus-változat-beállítások tulajdonságában. A betűtípus-változat-beállítások animatable, ami lehetővé teszi néhány nagyon hűvös UI hatásokat! Néhány nagyon érdekes kísérletet is előállították az Icon betűtípusok használatával is.

05. Grafikus hatások

Ha még nem ismeri, tervezési eszközök, mint a Photoshop és Illustrator, akkor lehet tisztában blend módok, és hogyan lehet használni, hogy más-más hatást a képeket. Az út keverék módja a két vagy több réteg összecsukása matematikai képletekkel együtt, hogy kiszámítsa az egyes képpontok eredményét. A rétegek bármi lehet - képek, gradiensek vagy lapos színek. Egyes keverékezési módok sötétített eredményt (például szaporodnak, ami megszorozza a rétegek pixelértékét), néhány könnyebb (pl. Képernyő és overlay). Nem kell megértenünk a matematikát, hogy felhasználhassuk őket. A különböző keverési módokkal játszik, jó érzést adhat nekünk, amely közülük a kívánt eredményeket különböző rétegekkel kombinálják.

A CSS tulajdonságokkal keverék-keverék és háttér-keverék-mód A böngészőben a Photoshop-szerű képhatásokat elérjük. Mindkét tulajdonság ugyanazokat az értékeket veszi figyelembe, de kissé eltérően dolgozik.

Háttér-keverék-mód

Háttér-keverék-mód összekeveredik a célzott elem háttérrétegeit. Elemünk lehet háttérképek, színek és gradiensek, és mindegyikük egymással keverhető, anélkül, hogy befolyásolná az előtér tartalmát. Több értéket is megadhatunk háttér-keverék-mód , az egyik minden egyes háttérréteghez.

 .my-elem {
Háttér: URL (#myurl),
Lineáris gradiens (45deg, RGBA (65, 68,
244, 1), RGBA (203, 66, 244, 0,5),
RGBA (244, 65, 106, 1);
Háttér méret: fedél;
Háttér-keverék: képernyő,
szorozzon;
} 

Keverék-keverék

Keverék-keverék Megmaga befolyásolja, hogy az elem hogyan keveredik a szülőjével és testvéreivel, beleértve az előtér és a háttér tartalmát, valamint a pszeudo-elemeket. Néhány érdekes kreatív hatás érhető el az átfedő pszeudo elemek keverésével (::: korábban és :: után).

 .my-elem {
Háttér: RGB (244, 65, 106);
MIX-BLEND-MODE: Szorzás;
} 

CSS szűrők

A CSS-szűrők is használhatók a látó vizuális effektusok létrehozására, a szűrő Tulajdonságok és szűrőfunkciós értékek. A keverési módoktól eltérően grafikus hatást alkalmaznak közvetlenül az általuk célzó elemre, és egy elem többszörös szűrőt is alkalmazhat.

Átalakítás szürkeárnyalatossá

Az elem színeit nagyobb mértékű vezérlést tudunk manipulálni, mint a keverési módokra támaszkodva. Szűrők tudja alakítani egy képet a szürkeárnyalatos a fényerő, kontraszt és telítettség, elmosódás eleme vagy adjunk hozzá egy árnyék. Ők is animáltak is, és jól néz ki a lebegő hatásokkal.

SVG szűrők

A CSS szűrők valójában egyszerűsített változata az SVG szűrők. A CSS szűrő az ingatlan is a URL () funkció, amely lehetővé teszi számunkra, hogy egy URL-ben átadjon egy SVG szűrőt. Az SVG szűrők rendkívül erősek és lehetővé teszik néhány hihetetlen képhatást - de ők is sokkal bonyolultabb, mint a CSS szűrőfunkciók! Sara Soueidan egy csodálatos cikksorozatú Codrops esetén, ha érdekli a búvárkodás a saját egyéni SVG szűrők kódolására. Nézze meg a cikket https://tympanus.net/codrops/2019/01/15/svg-filters-101/

Clipping és maszkolás: A téglalapokon túl

Régebben foglalkozunk az interneten lévő dobozok kezelésére, de nem mindennek négyszögletesnek kell lennie! A vágás és a maszkolás az ugyanazon érme két oldala, és különböző módon lehet elrejteni és bemutatni az elem különböző részeit úgy, hogy a háttér megjelenjen. Ez megadja nekünk a hatalmat, hogy érdekes és kreatív formákat mutasson a tervek számára.

Klip-pálya

A Clip-Path () Az ingatlan lehetővé teszi számunkra, hogy "kivágjuk" egy elemet az útvonal meghatározásával. Számos alap alakú funkciót igényel, Beépített (), kör (), ellipszis () vagy sokszög () , amely lehetővé teszi számunkra, hogy összetettebb kivágás alakzatot készítsünk, xy koordinátok párjaival, hogy meghatározzuk az utat. Alternatív megoldásként átmegyünk egy SVG útvonalon is pálya() funkció, vagy használata URL () SVG útvonalazonosító biztosítása.

Nem az ösvényen belül

Egy elem klippelése mindent az útvonalon kívül van, de maga az elem még mindig téglalap. Ha van olyan tartalma, amely kimarad a klip elérési útjának határán, akkor is lesz vágva - nem fog megcsípni az alakban.

Maszkkép

maszkkép Lehetővé teszi számunkra, hogy bemutassuk és elrejtsük a kép részeit egy kép (svg vagy átlátszó PNG) vagy gradiens, mint maszk. nem úgy mint klip-pálya , A maszkolással ellátott képeinkhez textúrát adhatunk hozzá, mivel a maszkforrásnak nem kell útnak lennie - lehetővé teszi az átláthatóság fokát.

06. CSS formák

A CSS alakzatok specifikáció lehetővé teszi számunkra, hogy lezárja a szöveg körül lebegett geometriai formák, ami néhány érdekes, magazin-szerű elrendezés. Ez lehetővé teszi a külső alakú ingatlan. Hasonló klip-pálya , megadhatjuk ezt a tulajdonságot alapvető alakzási funkcióval kör (), ellipszis (), beágyazás (), sokszög () , vagy egy URL-t egy SVG útvonalra, és valójában a két munka harmóniában nagyon jól! külső alakú A szöveget hatékonyan csomagolja, de nem befolyásolja a lebegő elemet. Ha azt szeretnénk, hogy a szöveg úgy nézzen ki, mintha a kép vagy a lebegő objektum körül lenne, akkor ugyanazt az értéket használhatjuk klip-pálya . Használat forma-margó Ahhoz, hogy hozzáadja a szóképet az alakútvonal és a tartalom között. Nézd meg a Cucc & amp; Ostobaság A webhely megtekintéséhez, hogy a CSS formák hogyan használják a szöveget egy központi kép körül.

A Firefoxnak van a Shape-Path Editor A DEV szerszámok panelen belül, amely különösen alkalmas komplex formákkal való együttműködésre. Ugyanakkor óvatosan kell használni. A szöveg egy bekezdésének vezető széle nagyszerű a művészi hatás szempontjából, de nem mindig nagyszerű a felhasználói élmény szempontjából. A komplex jagged alakzatok könnyebben olvashatják a szöveget. Fontos tartalom esetén érdemes átlátni.

07. Scroll Snapping

Sok honlap kihasználni JavaScript könyvtárak, hogy egy sima, natív app-szerű scroll tapasztalat, ahol a tartalmat „patent”, hogy pont a felhasználó görgeti. Most, hogy a Scroll Snap specifikáció, akkor ezt a jogot a mi CSS fájlt - van kevés kell import nehéz JS modulok duzzad az oldalt!

A görgetéscsomagolás végrehajtásához szükségünk van egy elemre, mint a görgető tartályunk. A konténer közvetlen gyermekei diktálják azokat a pontokat, amelyeket meg fognak kötni, és a snap területen belül különböző módon is összehangolható.

A tekercscsapás még hatékonyabb lehet, ha egy másik új CSS tulajdonságértékkel kombinálható - Pozíció: ragadós . Ez a pozíció érték "botok" egy elemet egy meghatározott pozícióba, miközben görgetés a tartályon belül - egy másik viselkedés, amely korábban csak a JavaScript segítségével lehetséges. Nézze meg ezt a görgetést a pozícióval: ragadós és interectionobserver példa .

08. CSS rács és elrendezések

A front-end fejlesztők megkötötték az elrendezést bármilyen eszközzel, hogy a legutóbb flexbox, amely sok modern rácsrendszert használ. De a flexboxot soha nem tervezték szigorú hálózatok építésére - annak célja a rugalmasság!

A CSS-rács az első specifikáció, amely kétdimenziós elrendezésre tervezték, lehetővé téve számunkra, amely lehetővé teszi számunkra az elrendezés és az oszlop tengelyének elrendezését és elhelyezését. A rácskal való reagáló elrendezés megteremtése nem igényel számított () vagy hacking negatív margókkal. A titkos fegyver az FR egység - egy új egység, amely kizárólag a rácsra. A FR egység méretét a rácsszámok (sorok és oszlopok) a rendelkezésre álló hely aránya. Figyelembe veszi a rögzített számokat, a csatornákat és a tartalmakat, majd a fennmaradó területet ennek megfelelően forgalmazza. Jen Simmons a "intrinsic web design" kifejezést írja le, hogy leírja a webes elrendezés új korszakát, amelyen a rács USER.

A CSS rács használata

A rács szükségessé teszi a Display Property értéket a rácshoz, hogy rácstartályként működjön. A rácstartály közvetlen gyermekei a rácsra helyezhetők. A tulajdonságokat használjuk rács-sablon-sorok és Rács-sablon-oszlopok A rácsszámok (sorok és oszlopok) meghatározása, és oszlop-rés és ráncos meghatározza a csatornákat (a pályák közötti réseket).

 .Grid {
Kijelző: rács;
Rács-sablon-oszlopok: Ismétlés (4, 1FR);
Rács-sablon-sorok: ismétlés (4, 200px);
Gap: 20px;
} 

A ismétlés() Funkció, hogy a kódot tömörítsük, a Longhand alternatívájaként (pl. Rács-sablon-oszlopok: 1fr 1fr 1fr 1fr 1fr 1fr ). Ez a példa a rövidítést is használja rés -ért ráncos és oszlop-rés .

A fenti kód négy soros pályát ad, mindegyik 100px-es magas és négy oszlopszám, amely mindegyike kitölti a rendelkezésre álló hely egyenlő arányát, az FR egység használatával.

Érdemes megjegyezni, hogy ez nem az egyetlen módja a rácsszámok létrehozásának. Az implicit sávok a rácselemek elhelyezésével is létrehozhatók. Hasznos lehet egy kicsit felolvasni erről, ha rácsot használsz, mivel azt fizeti, hogy mélyebb megértést kapjon arról, hogy a hálózat hogyan viselkedik különböző körülmények között, és sokkal könnyebbé teheti az elrendezést.

A rácson lévő elemeket a rácsvonalszámok hivatkozásával lehet elhelyezni, amelyek numerikus vonalak, amelyek az egyes sávok között ülnek. Itt a rövidítést használjuk rácsoszlop és rácsos -ért rács-oszlop-indítás , rács-oszlopvég , rácsos kezdet és rácsos . Ezek megmondják a böngészőt, amelyen az elemünknek meg kell kezdenie és véget vetünk minden tengelyen.

 .Az {
Grid-oszlop: 1/4;
Grid-Row: 2;
} 

A Grid számos különböző módja van az elemeknek: helyett tudnánk nevezni a rácsvonalainkat:

 .Grid {
Kijelző: rács;
Rács-sablon-oszlopok: [image-start] 1fr
 1FR 1FR [image-start] 1fr;
Rács-sablon-sorok: 200px [Képindítás]
 200 px 200px [image-end] 200px;
Gap: 20px;
} 

Alternatívaként a rács-sablon-terület A tulajdonság lehetővé teszi számunkra, hogy "Rajzoljon" egy rács elrendezést szöveggel.

 .Grid {
Kijelző: rács;
Rács-sablon-oszlopok: Ismétlés (4, 1FR);
Rács-sablon-sorok: ismétlés (4, 200px);
Gap: 20px;
Rács-sablon-területek:
„. . . . "
"Kép képkép."
"Kép képkép."
„. . . . ";
} 

Ezen módszerek bármelyikével egyszerűen a megfelelő hálózati területre hivatkozunk, amikor egy rácselemet helyezünk el:

 .Image {
Rácsterület: kép;
} 

Ezt a cikket eredetileg a Creative Web Design magazinban tették közzé Web designer . Vásároljon 290 kérdést.

• 10 legjobb CSS keretrendszer 2019-ben
• Hogyan lehet hozzáadni animációt az SVG-hez CSS-vel
• 52 Webes design eszközök, amelyek segítenek abban, hogy 2019-ben okosabbak legyenek