Hozzon létre animált CSS art-ot

CSS art
(Kép jóváírása: Tiffany Choong)

A CSS-képek létrehozása szórakoztató módja a készségek gyakorlásának és egy szép műalkotás elkészítésének. Szép szünet a webkomponensek szokásos napi stílusától. A kezdéshez csak egy üres dokumentum és egy CSS fájl szükséges; javasoljuk a Sass használatát, amely lehetővé teszi a stílusok újrafelhasználását és egyszerűbb választók írását (lásd a mi az a Sass? hogy többet megtudjon erről az előfeldolgozóról).

Kezdjük a CSS art elsajátításának néhány legfontosabb tippjével, majd megmutatjuk, hogyan lehet ezt az animált ballagót, Pikachu-t csak CSS-sel létrehozni (győződjön meg róla, hogy a fájljait rendben tartja biztonságban) felhőtároló ).

További inspirációért fedezze fel a csodálatos lehetőségeket CSS animációs példák . Valami alaposabb után? Kezdje a tanulással hogyan lehet egy jégkrémet létrehozni a CSS segítségével .



Vagy ha új webhelyet indít, árnyalja el a bonyolultságot egy ragyogóval weboldal készítő és győződjön meg róla, hogy megkapta-e webtárhely rajta.

Csökkentse a formatervezést egyszerű formákra

A CSS art készítésekor segíthet, ha inspirációként megnéz néhány referencia képet, majd haladva létrehoz egy egyszerűsített rajzfilmvariációt, és primitív alakzatokkal képzeli el a témát, amelyek jobbá teszik CSS alakzatok .

Használjon világos hátteret a pozícionáláshoz

Ha hasonló színű alakzatok átfedik egymást, nehéz megérteni, hogy hol helyezkednek el, vagy hogy néznek ki. Hasznos, ha az alak, amelyen dolgozik, kitűnik a háttérszín valami fényesre és vidámra, mint a bíborvörös. Ez lehetővé teszi, hogy könnyen láthassa az elem pontos helyzetét és alakját.

Használjon folyadékméretet

A tulajdonságok px értékének meghatározásakor javasoljuk a rem egység használatát. Abban az esetben, ha úgy dönt, hogy az egész darab nagyobb vagy kisebb, rem egységek használatával csak az alapot kell megváltoztatnia html {font-size:… px} a Sass-ban, hogy az egész grafikát felfelé vagy lefelé méretezze.

Annak a gyermekelemnek a magasságát és szélességét meghatározva, amelynek a szülőhöz viszonyított nagyságúnak kell lennie, a százalékok jól jönnek. Mivel ezek az értékek mindig a szülőkhöz viszonyulnak, ezért a html betűméret .

CSS létrehozása

A CSS generálása egy egyedi konferencia, amelyet a Creative Bloq, a net és a Web Designer hozott létre. Kattintson, hogy lefoglalja Early Bird jegyét!(Kép jóváírása: Getty / Future)

01. Kezdje a konténerekkel

A műalkotások darabjainak csomagolására szolgáló tartály jó kiindulópont. A tartályon belül három belső tartályt helyezhetünk el - a fejet, a testet és a lufikat.

hogyan tisztítsuk meg az ecseteket akrilfestékkel

A tartálynak általában pozíció: rokon hogy más elemeket viszonylag belül lehessen elhelyezni pozíció: abszolút és jól meghatározott magasságuk és szélességük van, különben a gyermekelemek elhelyezése nehézkessé válik.

Stílusaiban adja hozzá az alapszíneit Sass-változóként az újrafelhasználhatóság érdekében. A Sass világít () és sötétíteni () A funkciók színárnyalatokat és árnyalatokat hoznak létre, amelyek kiemelésként vagy árnyékként használhatók a karaktered számára.

02. Stílusozza a fejét

A kitalált struktúrával először stílusozzuk a fejet. Ebben az esetben a fej szép középpontot képez a mű számára, ezért ahelyett, hogy abszolút helyzetbe állítaná, relatívra állíthatja. Ez lehetővé teszi, hogy a konténer stabil elemet tartalmazzon benne, így a többi úszó abszolút elem rögzítési pontot kap, és ezáltal jobban szabályozhatja helyzetüket.

Az arcvonásokhoz tartályra lesz szükség a pozícionáláshoz, ezért hozzon létre egy a fej alakú tartály belsejében a sárga formához, szélességgel, magassággal és háttérszínnel - most tegyük ezt a téglalapot inkább fejformának. A CSS művészet egyik leggyakoribb és leghasznosabb tulajdonsága a határsugár tulajdonság, amely megváltoztatja egy doboz sarkainak X vagy Y görbéjét, és organikusabb alakzatok létrehozására használható.

Ezzel a technikával egy rem és százalékos kombinációval blobszerű alakzatokat készíthet, nem csak sima ellipsziseket, amelyek természetesen a 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; ... }

Miután tökéletesítette a fejét határsugár , helyezze a többi arcvonást a gyermek gyermekelemeként, mint például a szem, az arc, az orr és a fül. Mint a fej, a határsugár trükk jól fog jönni azóta határsugár: 50% nem tűnhet vonzónak.

03. Haladjon tovább a testre

Egy test a fej mögötti testtartályba helyezhető, és ezzel formázható határsugár technika, valamint a karok, lábak és farok. A megfelelő átfedés érdekében a tényleges testnek a saját elemének kell lennie, mivel bizonyos belső elemeket, például a hátsó csíkokat le kell vágni túlcsordulás: rejtett . A test mélységének növelése érdekében a átalakítás: ferde () tulajdonság kissé átdobhatja a testet.

A villámfarok három különálló téglalap segítségével építhető fel, ahelyett, hogy megpróbálná ezt az alakot egy elemből kialakítani. A téglalapok elforgathatók és egymás tetejére helyezhetők, hogy csavart alkossanak. A karok és lábak használhatják azt a sötétebb alapszínt, amelyet a Sass segítségével hoztunk létre sötétíteni () tehát kitűnnek.

04. Adjon hozzá lufikat

Most, hogy elkészült az elektromos egér, kössünk léggömböket a hátához. Adjon hozzá néhányat s megosztott stílusokkal gyermekhúrral és csomózva helyezze őket a fej fölé. A karakterlánc láthatatlan, kivéve a határ-bal , amelyek segítenek húrszerűbbé tenni.

Ahhoz, hogy a húr a karakter dereka köré legyen kötve, a a testen belül helyezhető el a megfelelő elhelyezés érdekében. A húrnak enyhe görbe kell, hogy megjelenjen, mintha a test köré lenne kötve, így kis magassága lehet, határfenék és a határfenék bal és jobb sugár, amely vékony ívelt vonalat alkot:

.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. Animálja a CSS-t

Életet adhatunk a karakternek hozzáadással @ kulcsképek animációk. A karok, lábak, fülek és farok animálhatók transzformáció: forgatás () . Biztosítsa a átalakulás-eredet az „ízületre” van beállítva (azaz a láb felső középpontja), és állítsa be a forgást. Ez az animációs típus többször használható egy Sass-keverőben:

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

Végül egy lassú 5-ös hozzáadása átalakítás: fordításY () A kulcsképes animáció fel és le animálja a karaktert, mintha lebegne. Egy kis realizmusért villogó animáció transzformáció: skálaY (0,1) tulajdonság használható arra, hogy úgy tűnjön, mintha a szemek becsukódnának.

Ez a cikk eredetileg a kreatív webdesign magazinban jelent meg háló . Vásárolja meg a 283. számot vagy Iratkozz fel .

Olvass tovább: