Vytvorte animované umenie CSS

CSS čl
(Obrázok: © Tiffany Choong)

Vytváranie obrázkov CSS je zábavný spôsob, ako si precvičiť svoje zručnosti a vytvoriť elegantné umelecké dielo. Je to príjemná prestávka od bežného každodenného tvarovania webových komponentov. Všetko, čo musíte začať, je prázdny dokument a súbor CSS; odporúčame vám použiť Sass, ktorý vám umožní znovu použiť vaše štýly a napísať jednoduchšie selektory (pozrite si nášho sprievodcu po čo je Sass? Ak sa chcete dozvedieť viac o tomto preprocesore).

Začneme niektorými najlepšími tipmi na zvládnutie umenia CSS, potom vám ukážeme, ako znova vytvoriť tento animovaný balón Pikachu iba pomocou CSS (nezabudnite na svoje súbory v slušnom formáte cloud-ové úložisko ).

Ak chcete získať viac inšpirácie, preskúmajte náš úžasný súhrn Príklady animácií CSS . Po niečom základnejšom? Začnite učením ako vytvoriť nanuk pomocou CSS .



Alebo ak zakladáte nový web, zbavte sa zložitosti brilantným riešením tvorca webových stránok a uistite sa, že máte svoj web hosting spozorovať.

Zúžte dizajn na jednoduché tvary

Pri vytváraní umenia CSS vám môže pomôcť pozrieť sa na niekoľko referenčných obrázkov, aby ste sa inšpirovali, a potom vytvoriť zjednodušenú variáciu karikatúry, keď budete postupovať ďalej, keď si predstavíte predmet pomocou primitívnych tvarov, ktoré zlepšia Tvary CSS .

Na uľahčenie umiestnenia použite svetlé pozadie

Pri prekrývaní tvarov podobných farieb je ťažké zistiť, kde sú umiestnené alebo ako vyzerajú. Je užitočné nechať vyniknúť tvar, na ktorom pracujete, tým, že ho zmeníte farba pozadia na niečo svetlé a veselé, napríklad purpurové. Takto môžete ľahko vidieť presnú polohu a tvar vášho prvku.

Používajte veľkosti tekutín

Pokiaľ ide o definovanie hodnoty px pre vlastnosti, odporúčame vám použiť rem jednotku. V prípade, že sa rozhodnete, že chcete, aby bol váš celkový kúsok väčší alebo menší, pomocou rem jednotiek musíte zmeniť iba základňu html {font-size:… px} vo vašom Sass zväčšiť alebo zmenšiť celé umelecké dielo.

Pri definovaní výšky a šírky podradených prvkov, ktoré by mali mať relatívnu veľkosť oproti rodičovi, sa hodia percentá. Pretože tieto hodnoty sú vždy relatívne k ich rodičom, mali by sa tiež škálovať s html veľkosť písma .

Generovať CSS

Generate CSS je konferencia na mieru, ktorú vám prinesie program Creative Bloq, net a Web Designer. Kliknutím zarezervujete lístok na Early Bird!(Obrázok: © Getty / Future)

01. Začnite kontajnermi

Dobrým začiatkom je obalová nádoba na uchytenie diel. V rámci nádoby môžeme umiestniť tri vnútorné nádoby - hlavu, telo a balóny.

13-palcové puzdro a kryt klávesnice na MacBook Pro

Kontajner by mal byť zvyčajne pozícia: relatívna aby bolo možné umiestniť ďalšie prvky relatívne dovnútra pomocou pozícia: absolútna a majú presne stanovenú výšku a šírku, inak sa umiestnenie podriadených prvkov stáva zložitým.

Do svojich štýlov pridajte svoje základné farby ako premenné Sass, aby ste ich mohli znovu použiť. Sass zosvetliť () a stmaviť () Funkcie vytvoria odtiene a odtiene vašich farieb, ktoré možno použiť ako zvýraznenie alebo tieň pre vašu postavu.

02. Upravte hlavu

Keď je štruktúra zistená, najskôr urobme štýl hlavy. V takom prípade je hlava pre umelecké dielo pekným stredovým bodom, takže je možné ho radšej nastaviť ako relatívnu namiesto nastavenia polohy do absolútnej polohy. To umožňuje, aby mal kontajner vo vnútri stabilný prvok, čo dáva ostatným plávajúcim absolútnym prvkom kotviaci bod, a tým poskytuje väčšiu kontrolu nad ich polohou.

Funkcie tváre budú potrebovať nádobu na umiestnenie, takže vytvorte a vo vnútri nádoby na hlavu pre žltý tvar so šírkou, výškou a farbou pozadia - teraz urobme tento obdĺžnik, aby vyzeral skôr ako tvar hlavy. Jednou z najbežnejších a najužitočnejších vlastností v CSS umení je polomer hranice vlastnosť, ktorá mení krivku X alebo Y rohov krabice a dá sa pomocou nej vytvoriť viac organických tvarov.

Pomocou tejto techniky s kombináciou rem a percent môžete vytvoriť tvary podobné blobom, nielen obyčajné elipsy, ktoré sa prirodzene zväčšujú pomocou html {font-size:… px} :

.face { border-top-left-radius: 50% 4.5rem; border-top-right-radius: 50% 4.5rem; border-bottom-left-radius: 50% 3rem; border-bottom-right-radius: 50% 3rem; ... }

Po zdokonalení hlavy polomer hranice , položte ostatné tvárové prvky ako detské prvky hlavy, ako sú oči, líca, nos a uši. Rovnako ako hlava, polomer hranice trik sa bude hodiť odvtedy polomer hranice: 50% nemusí vyzerať lákavo.

03. Prejdite na telo

Telo môžu byť umiestnené v nádobe na telo za hlavou a tvarované s nimi polomer hranice ruky, nohy a chvost. Aby sa umožnilo správne prekrytie, skutočné telo by malo byť jeho vlastným prvkom, pretože určité vnútorné prvky, ako napríklad zadné pruhy, bude potrebné odrezať pomocou pretečenie: skryté . Ak chcete dať telu väčšiu hĺbku, použite transformácia: zošikmenie () majetok môže mierne pokrývať telo.

Chvost blesku je možné zostaviť pomocou troch samostatných obdĺžnikov namiesto pokusu o vytvorenie tohto tvaru z jedného prvku. Obdĺžniky je možné otáčať a umiestňovať cez seba, aby sa vytvorila skrutka. Ruky a nohy môžu používať tmavšiu primárnu farbu, ktorú sme vytvorili pomocou nástroja Sass stmaviť () takže vyniknú.

04. Pridajte balóniky

Teraz, keď je elektrická myš hotová, priviažeme si balóniky o jej chrbát. Pridajte nejaké s so zdieľanými štýlmi s podradeným reťazcom a umiestnite ich zväzky nad hlavu. Reťazec je neviditeľný okrem a hraničná-ľavá , ktoré mu pomáhajú vylepšiť vzhľad reťazca.

Na uviazanie šnúrky okolo pása postavy, a môžu byť umiestnené v tele, aby sa umožnilo správne umiestnenie. Šnúrka musí mať mierne zakrivenie, aby vyzerala, akoby bola uviazaná okolo tela, aby mohla mať malú výšku, hraničné dno a a hraničné dno ľavý a pravý polomer, ktorý vytvára tenkú zakrivenú čiaru:

.string { height: 1rem; width: 9rem; border-right: solid 1px $white; border-left: solid 1px $white; border-bottom: solid 1px $white; border-bottom-left-radius: 50% 1rem; border-bottom-right-radius: 50% 1rem; }

05. Animujte CSS

Môžeme dať postave život pridaním @keyframes animácie. Ruky, nohy, uši a chvost môžu byť animované transformácia: otočenie () . Zaistite transformačný pôvod je nastavený na „kĺb“ (t. j. horný stred pre nohu) a upraví rotáciu. Tento typ animácie je možné v mixe Sass použiť niekoľkokrát:

@mixin animateRotate($name, $start, $end) { @keyframes #{$name} { 0%, 100% { transform: rotate(#{$start}deg) } 50% { transform: rotate(#{$end}deg) } } }

Nakoniec pridanie pomalých 5 s transformácia: preložiťY () animácia kľúčových snímok bude animovať postavu hore a dole, akoby sa vznášala. Pre dotyk realizmu je použitá blikajúca animácia transformácia: scaleY (0,1) vlastnosť sa dá použiť, aby to vyzeralo, akoby sa oči zatvárali.

Tento článok bol pôvodne publikovaný v časopise Creative Web Design sieť . Kúpte si číslo 283 alebo prihlásiť sa na odber .

Čítaj viac: