Stvorite animiranu CSS umjetnost

CSS čl
(Slika zaslužna: Tiffany Choong)

Stvaranje CSS slika zabavan je način vježbanja svojih vještina i stvaranja urednog umjetničkog djela. Lijep je odmor od uobičajenog svakodnevnog oblikovanja web komponenata. Za početak su vam potrebni samo prazan dokument i CSS datoteka; preporučujemo upotrebu Sass-a koji će vam omogućiti ponovnu upotrebu stilova i pisanje jednostavnijih selektora (pogledajte naš vodič za što je Sass? da biste saznali više o ovom pretprocesoru).

Započet ćemo s nekoliko najboljih savjeta za svladavanje CSS umjetnosti, a zatim ćemo vam pokazati kako ponovno stvoriti ovaj animirani balon Pikachu koristeći samo CSS (pobrinite se da svoje datoteke čuvate pristojno pohrana u oblaku ).

Za više nadahnuća istražite naš pregled nevjerojatnih Primjeri CSS animacije . Nakon nečeg osnovnijeg? Započnite s učenjem kako stvoriti ledeni lolly pomoću CSS-a .



Ili, ako započinjete novo web mjesto, sjajno se odreknite složenosti graditelj web stranica i pobrinite se da uzmete svoj web hosting točno tako.

Smanjite dizajn na jednostavne oblike

Kada stvarate CSS umjetnost, može vam pomoći pogledati nekoliko referentnih slika kako biste pronašli inspiraciju, a zatim stvorite pojednostavljenu varijaciju crtića dok idete, zamišljajući subjekt pomoću primitivnih oblika, koji čine boljim CSS oblici .

Upotrijebite svijetlu pozadinu za pomoć pri pozicioniranju

Kada se preklapaju oblici sličnih boja, teško je vidjeti gdje su postavljeni ili kako izgledaju. Korisno je da se oblik na kojem radite istakne mijenjanjem boja pozadine na nešto svijetlo i veselo, poput magenta. To vam omogućuje da lako vidite točan položaj i oblik vašeg elementa.

Koristite veličine tekućine

Što se tiče definiranja vrijednosti px za svojstva, preporučili bismo upotrebu rem jedinice. U slučaju da odlučite da želite da vaš ukupni komad bude veći ili manji, upotrebom rem jedinica morate samo promijeniti bazu html {veličina slova:… px} u vašem Sassu kako biste cijelo umjetničko djelo povećali ili smanjili.

Kada definiramo visine i širine podređenih elemenata koji bi trebali imati relativnu veličinu u odnosu na roditelja, postoci dobro dođu. Budući da su ove vrijednosti uvijek u odnosu na roditelja, trebale bi se i skalirati s html veličina fonta .

Generirajte CSS

Generate CSS je konferencija po mjeri koju su vam donijeli Creative Bloq, net i Web Designer. Kliknite da biste rezervirali kartu za Early Bird!(Slika zaslužna: Getty / Budućnost)

01. Počnite s kontejnerima

Spremnik za omot za držanje umjetničkih djela dobro je mjesto za početak. Unutar spremnika možemo smjestiti tri unutarnja spremnika - glavu, tijelo i balone.

kako crtati pop art lica

Kontejner bi obično trebao biti položaj: relativan kako bi se omogućilo postavljanje ostalih elemenata relativno unutar njega pomoću položaj: apsolutni i imaju dobro definiranu visinu i širinu, inače postavljanje podređenih elemenata postaje teško.

U svoje stilove dodajte osnovne boje kao Sass varijable radi ponovne upotrebe. Sass posvijetliti () i potamniti () funkcije će stvoriti nijanse i nijanse vaših boja, koje se mogu koristiti kao isticanja ili sjene za vaš lik.

02. Oblikujte glavu

S obzirom na strukturu, osmislimo prvo glavu. U ovom slučaju, glava čini lijepu središnju točku za umjetničko djelo, pa umjesto da svoj položaj postavi na apsolutni, može se postaviti na relativni. To omogućuje da spremnik ima stabilni element u sebi, dajući ostalim plutajućim apsolutnim elementima točku sidrišta i time veću kontrolu nad svojim položajem.

Crtama lica trebat će spremnik za pozicioniranje, pa izradite unutar spremnika za glavu za žuti oblik širine, visine i boje pozadine - učinimo sada da ovaj pravokutnik više sliči obliku glave. Jedno od najčešćih i najkorisnijih svojstava u CSS umjetnosti je granica-radijus svojstvo, koje mijenja krivulju X ili Y uglova kutije i može se koristiti za stvaranje više organskih oblika.

Koristeći ovu tehniku ​​s kombinacijom rem i postotaka, možete napraviti oblike slične mrljama, a ne samo obične elipse, koje se prirodno skaliraju s 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; ... }

Nakon usavršavanja glave granica-radijus , postavite ostatak crta lica kao dječje elemente glave, poput očiju, obraza, nosa i ušiju. Poput glave, i granica-radijus trik će dobro doći od radijus granice: 50% možda ne izgleda privlačno.

03. Prijeđite na tijelo

Tijelo mogu se smjestiti unutar spremnika za tijelo iza glave i oblikovati istim granica-radijus tehnika, kao i ruke, noge i rep. Da bi se omogućilo pravilno preklapanje, stvarno tijelo trebalo bi biti vlastiti element, jer će određeni unutarnji elementi poput stražnjih pruga morati biti odsječeni preljev: skriven . Da bi tijelo dobilo veću dubinu, transformirati: skew () svojstvo može lagano prozračiti tijelo.

Rep groma može se izgraditi pomoću tri odvojena pravokutnika, umjesto da se pokuša oblikovati ovaj oblik iz jednog elementa. Pravokutnici se mogu okretati i postavljati jedan preko drugog da bi se stvorio vijak. Ruke i noge mogu koristiti tamniju primarnu boju koju smo stvorili pomoću Sass-a potamniti () pa se ističu.

04. Dodajte balone

Sad kad je električni miš završen, privežimo balone na njegova leđa. Dodajte malo s zajedničkim stilovima s podređenim nizom i smjestite ih skupljene iznad glave. Niz je nevidljiv, osim a granica-lijevo , koji pomažu da izgleda sličnije nizu.

Za vezivanje struna oko struka lika, a može se smjestiti unutar tijela kako bi se omogućilo pravilno pozicioniranje. Žica treba laganu krivulju da bi se pojavila kao da je vezana oko tijela, tako da može imati malu visinu, granica-dno i a granica-dno lijevi i desni radijus, što čini tanku zakrivljenu liniju:

.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. Animirajte CSS

Liku možemo dati život dodavanjem @keyframes animacije. Mogu se animirati ruke, noge, uši i rep transformirati: rotirati () . Osigurajte transformirati-podrijetlo postavljen je na 'zglob' (tj. gornji centar noge) i prilagodite rotaciju. Ova vrsta animacije može se koristiti nekoliko puta u Sassovom mixinu:

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

Konačno, dodavanje polakih 5s transformirati: translateY () keyframe animacija animirat će lik gore-dolje kao da lebdi. Za dašak realizma, trepćuća animacija pomoću pretvorba: razmjeraY (0,1) svojstvo se može koristiti da se čini kao da se oči zatvaraju.

Ovaj je članak izvorno objavljen u časopisu kreativnog web dizajna neto . Kupi izdanje 283 ili pretplatite se .

Čitaj više: