Lag animert CSS-kunst

CSS art
(Bildekreditt: Tiffany Choong)

Å lage CSS-bilder er en morsom måte å øve på ferdighetene dine og lage et pent kunstverk. Det er en fin pause fra den vanlige daglige stylingen av webkomponenter. Alt du trenger for å komme i gang er et tomt dokument og en CSS-fil; Vi anbefaler å bruke Sass, som gjør at du kan bruke stilene dine og skrive enklere velgere (se vår guide til hva er Sass? for å lære mer om denne forprosessoren).

Vi begynner med noen av de beste tipsene for å mestre CSS-kunst, og viser deg hvordan du kan gjenskape denne animerte ballongen Pikachu ved å bare bruke CSS (sørg for at du holder filene dine trygge på anstendig måte) skylagring ).

For mer inspirasjon, utforsk vår samling av fantastiske CSS animasjonseksempler . Etter noe mer grunnleggende? Start med å lære hvordan lage en ispinne ved hjelp av CSS .



Eller hvis du starter et nytt nettsted, kan du avdekke kompleksiteten med et strålende nettstedsbygger og sørg for at du får din webhotell midt i blinken.

Reduser designet til enkle former

Når du lager CSS-kunst, kan det hjelpe å se på noen referansebilder for inspirasjon og deretter lage en forenklet tegneserievariasjon mens du går videre, og forestille deg motivet ved hjelp av primitive former, som blir bedre CSS former .

Bruk en lys bakgrunn for å hjelpe deg med posisjonering

Når du overlapper former med lignende farger, er det vanskelig å se hvor de plasseres eller hvordan de ser ut. Det er nyttig å ha formen du jobber med skiller seg ut ved å endre bakgrunnsfarge til noe lyst og muntert, som magenta. Dette lar deg enkelt se den eksakte posisjonen og formen til elementet ditt.

Bruk væskestørrelser

Når det gjelder å definere en px-verdi for eiendommer, vil vi anbefale å bruke rem-enheten. I tilfelle du bestemmer deg for at du vil at din samlede brikke skal være større eller mindre, ved å bruke rem-enheter, trenger du bare å endre basen html {font-size:… px} i Sass for å skalere hele kunstverket opp eller ned.

Når du definerer høyder og bredder på underordnede elementer som skal ha relativ størrelse til foreldrene, kommer prosentandeler til nytte. Siden disse verdiene alltid er relative til foreldrene sine, bør de også skaleres med html skriftstørrelse .

Generer CSS

Generate CSS er en skreddersydd konferanse brakt til deg av Creative Bloq, net og Web Designer. Klikk for å bestille Early Bird-billetten!(Bildekreditt: Getty / Future)

01. Start med containere

En innpakningsbeholder for å holde kunstverkene er et godt sted å starte. I containeren kan vi plassere tre indre containere - hodet, kroppen og ballongene.

lavt lyspunkt og skyte kamera

Beholderen skal vanligvis være posisjon: relativ slik at andre elementer kan plasseres relativt inne i den ved hjelp av posisjon: absolutt og ha en veldefinert høyde og bredde, ellers blir det vanskelig å plassere barneelementer.

I stilene dine legger du til grunnfargene som Sass-variabler for gjenbrukbarhet. Sass lysere () og mørkere () funksjoner vil skape fargetoner og nyanser av fargene dine, som kan brukes som høydepunkter eller skygger for karakteren din.

02. Stil hodet

Med strukturen funnet ut, la oss style hodet først. I dette tilfellet gjør hodet et fint midtpunkt for kunstverket, så i stedet for å sette sin posisjon til absolutt, kan det settes til relativ. Dette gjør at beholderen kan ha et stabilt element inni seg, noe som gir de andre flytende absolutte elementene et ankerpunkt og dermed mer kontroll over posisjonen.

Ansiktsfunksjonene trenger en beholder for posisjonering, så lag en inne i hodebeholderen for den gule formen med bredde, høyde og bakgrunnsfarge - la oss nå gjøre dette rektangelet mer som en hodeform. En av de vanligste og mest nyttige egenskapene i CSS-kunst er grense-radius egenskap, som endrer kurven til X eller Y i hjørner av en boks og kan brukes til å lage mer organiske former.

Ved å bruke denne teknikken med en rem og prosentkombinasjon, kan du lage blob-lignende former i stedet for bare vanlige ellipser, som naturlig skaleres med 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; ... }

Etter å ha perfeksjonert hodet grense-radius , plasser resten av ansiktsegenskapene som barnelementer i hodet, som øyne, kinn, nese og ører. Som hodet, den grense-radius triks vil komme til nytte siden grenseradius: 50% ser kanskje ikke tiltalende ut.

03. Gå videre til kroppen

En kropp kan plasseres i karosseribeholderen bak hodet og formes med det samme grense-radius teknikk, så vel som armer, ben og hale. For å muliggjøre riktig overlapping, bør selve kroppen være sitt eget element, da visse indre elementer som bakstripene må kuttes av med overløp: skjult . For å gi kroppen mer dybde, er transform: skew () egenskap kan rense kroppen litt.

Lynbolten kan bygges ved hjelp av tre separate rektangler i stedet for å prøve å danne denne formen fra ett element. Rektanglene kan roteres og plasseres over hverandre for å danne en bolt. Armene og bena kan bruke den mørkere primærfargen vi opprettet ved hjelp av Sass mørkere () så de skiller seg ut.

04. Legg til ballonger

Nå som den elektriske musen er ferdig, la oss knytte ballonger til ryggen. Legg til litt s med delte stiler med en barnestreng og plasser dem sammen over hodet. Strengen er usynlig bortsett fra en grense-venstre , som hjelper deg med å få den til å se strengere ut.

For å binde snoren rundt karakterens midje, a kan plasseres i kroppen for å muliggjøre riktig posisjonering. Strengen trenger en liten kurve for å se ut som om den er bundet rundt kroppen, slik at den kan ha en liten høyde, kantbunn og en kantbunn venstre og høyre radius, som lager en tynn buet linje:

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

Vi kan gi karakteren liv ved å legge til @keyframes animasjoner. Armene, bena, ørene og halen kan animeres med transformer: roter () . Sørg for at transform-opprinnelse er satt til 'skjøten' (dvs. øverste senter for et ben) og juster rotasjonen. Denne animasjonstypen kan brukes flere ganger i en Sass-blanding:

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

Til slutt legger du til en langsom 5s transform: translateY () keyframe-animasjon vil animere karakteren opp og ned som om den flyter. For et snev av realisme, en blinkende animasjon som bruker transform: scaleY (0.1) egenskap kan brukes til å få det til å se ut som om øynene lukkes.

Denne artikkelen ble opprinnelig publisert i kreativt magasin for webdesign nett . Kjøp utgave 283 eller abonnere .

Les mer: