Luo animoitua CSS-taidetta

CSS-taide
(Kuvan luotto: Tiffany Choong)

CSS-kuvien luominen on hauska tapa harjoitella taitojasi ja luoda siisti taideteos. Se on mukava tauko verkkokomponenttien tavallisesta päivittäisestä muotoilusta. Aloittamiseen tarvitaan vain tyhjä asiakirja ja CSS-tiedosto; suosittelemme Sassin käyttöä, jonka avulla voit käyttää tyylejäsi uudelleen ja kirjoittaa yksinkertaisempia valitsimia (katso oppaamme mikä on Sass? saadaksesi lisätietoja tästä esiprosessorista).

Aloitamme joistakin tärkeimmistä vinkeistä CSS-taiteen hallitsemiseksi ja näytämme sitten, miten tämä animoitu ilmapallo Pikachu voidaan luoda uudelleen vain CSS: n avulla (varmista, että pidät tiedostosi turvassa kunnossa pilvitallennus ).



Saat lisää inspiraatiota tutustumalla hämmästyttävän kokoelmaamme CSS-animaatioesimerkkejä . Jonkin perustavanlaatuisemman jälkeen? Aloita oppimalla kuinka luoda jäänmurtaja CSS: n avulla .



Tai jos olet aloittamassa uutta sivustoa, oja monimutkaisuus loistavalla verkkosivujen rakentaja ja varmista, että saat sivujen ylläpito naulankantaan.

Pienennä muotoilu yksinkertaisiin muotoihin



Kun luot CSS-taidetta, se voi auttaa katsomaan muutamia viitekuvia inspiraation saamiseksi ja luomaan sitten yksinkertaistetun sarjakuvamuunnelman edetessä, kuvittelemalla kohdetta primitiivisillä muodoilla, jotka parantavat CSS-muodot .

Käytä kirkasta taustaa paikannuksen helpottamiseksi

Kun päällekkäisiä samanvärisiä muotoja on vaikea nähdä, mihin ne sijoitetaan tai miltä ne näyttävät. On hyödyllistä saada muoto, jolla työskentelet, erottumaan muuttamalla taustaväri johonkin kirkkaaseen ja iloiseen, kuten magentaan. Näin voit helposti nähdä elementin tarkan sijainnin ja muodon.



Käytä nestekokoja

Ominaisuuksien px-arvon määrittämisessä suosittelemme rem-yksikön käyttöä. Jos päätät, että haluat kokonaisesi olevan suurempi tai pienempi, käyttämällä rem-yksiköitä sinun on vain vaihdettava pohja html {font-size:… px} skaalata koko kuvamateriaalia ylös tai alas.

Määritettäessä sellaisten lapsielementtien korkeuksia ja leveyksiä, joiden suhteellisen koon tulisi olla vanhempaan nähden, prosenttiosuudet ovat käteviä. Koska nämä arvot ovat aina suhteessa vanhempiinsa, niiden tulisi skaalata myös html-fontin koko .

Luo CSS

Generate CSS on räätälöity konferenssi, jonka Creative Bloq, verkko- ja verkkosuunnittelija toivat sinulle. Klikkaa varataksesi Early Bird -lippusi!(Kuvan luotto: Getty / Future)

01. Aloita astioista

Kääresäiliö taideteoksen kappaleiden pitämiseen on hyvä paikka aloittaa. Säiliöön voidaan sijoittaa kolme sisäastiaa - pää, runko ja ilmapallot.

kuinka kynää pidetään kunnolla

Säiliön tulisi yleensä olla asema: suhteellinen jotta muut elementit voidaan sijoittaa suhteellisen sen sisälle käyttämällä sijainti: absoluuttinen ja niillä on hyvin määritelty korkeus ja leveys, muuten lapsielementtien sijoittaminen on vaikeaa.

Lisää tyyleihisi perusvärit Sass-muuttujina uudelleenkäytettäväksi. Sass keventää() ja tummentaa() toiminnot luovat värejäsi sävyjä ja sävyjä, joita voidaan käyttää hahmosi korostuksina tai varjoina.

02. Muotoile pää

Kun rakenne on selvitetty, muotoillaan pää ensin. Tällöin pää muodostaa mukavan keskipisteen taideteokselle, joten sen sijaan, että asento olisi absoluuttinen, se voidaan asettaa suhteelliseksi. Tämä mahdollistaa säiliön sisällä olevan vakaan elementin, antaen muille kelluville absoluuttisille elementeille ankkuripisteen ja siten paremmin hallita niiden sijaintia.

Kasvojen piirteisiin tarvitaan säiliö paikannusta varten, joten luo keltaisen muodon päänsäiliön leveys, korkeus ja taustaväri - nyt tehdään tämä suorakulmio näyttämään enemmän pään muodolta. Yksi CSS-taiteen yleisimmistä ja hyödyllisimmistä ominaisuuksista on raja-säde ominaisuus, joka muuttaa laatikon kulmien X- tai Y-käyrää ja jota voidaan käyttää luomaan enemmän orgaanisia muotoja.

Käyttämällä tätä tekniikkaa rem- ja prosenttiyhdistelmällä voit tehdä möykkyisiä muotoja pelkkien ellipsien sijaan, jotka skaalautuvat luonnollisesti 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; ... }

Pään parantamisen jälkeen raja-säde , aseta loput kasvojen piirteet pään lapsielementteinä, kuten silmät, posket, nenä ja korvat. Kuten pää, raja-säde temppu tulee olemaan kätevä siitä lähtien reunan säde: 50% ei ehkä näytä houkuttelevalta.

03. Siirry kehoon

Vartalo voidaan sijoittaa kehon astiaan pään taakse ja muotoilla samalla raja-säde sekä kädet, jalat ja häntä. Oikean päällekkäisyyden varmistamiseksi varsinaisen rungon tulisi olla oma elementti, koska tietyt sisäelementit, kuten takanauhat, on leikattava ylivuoto piilotettu . Kehon syvyyden lisäämiseksi muunnos: vinous () omaisuus voi ohittaa kehon hieman.

Salamanpää voidaan rakentaa käyttämällä kolmea erillistä suorakulmiota sen sijaan, että yritettäisiin muodostaa tämä muoto yhdestä elementistä. Suorakulmioita voidaan kiertää ja sijoittaa päällekkäin pultin muodostamiseksi. Kädet ja jalat voivat käyttää tummempaa pääväriä, jonka loimme Sassin avulla tummentaa() joten ne erottuvat.

04. Lisää ilmapalloja

Nyt kun sähköhiiri on valmis, sidotaan ilmapallot sen takaosaan. Lisää joitain s jaetuilla tyyleillä alijonolla ja aseta ne nippuina pään yläpuolelle. Merkkijono on näkymätön paitsi a raja-vasen , jotka auttavat tekemään sen näyttämään merkkijonomaisemmalta.

Sitoa merkkijono merkin vyötärön ympärille a voidaan sijoittaa runkoon oikean sijainnin mahdollistamiseksi. Merkkijono tarvitsee pienen käyrän ilmestyvän ikään kuin se olisi sidottu rungon ympärille, joten sillä voi olla pieni korkeus, reunan pohja ja a reunan pohja vasen ja oikea säde, mikä tekee ohuesta kaarevasta viivasta:

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

Voimme antaa hahmolle elämän lisäämällä @ avainkehykset animaatioita. Kädet, jalat, korvat ja häntä voidaan animoida muunnos: kiertää () . Varmista, että muunnos-alkuperä on asetettu nivelelle (eli jalan yläkeskelle) ja säädä kierto. Tätä animaatiotyyppiä voidaan käyttää useita kertoja Sass-miksauksessa:

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

Lopuksi lisäämällä hidas 5s muunna: käännäY () avainkehysanimaatio animoi hahmon ylös ja alas ikään kuin se olisi kelluva. Ripaus realismia, vilkkuva animaatio käyttäen muunnos: asteikko Y (0,1) omaisuutta voidaan käyttää saamaan se näyttämään siltä kuin silmät sulkeutuisivat.

Tämä artikkeli julkaistiin alun perin luovan verkkosivujen lehdessä netto . Osta numero 283 tai tilaa .

Lue lisää: