Hvorfor skulle du gjøre det i CSS?

0
56

Og med det, er det vanligvis noen form for CSS-eksperiment, som ofte er en forseggjort tegning eller interaksjon.

For eksempel, har du sett Lynn Fisher ‘ s ekstraordinære Et Enkelt Div prosjekt? Ikke bare er alle disse grafikk trukket i bare HTML og CSS, de er alle laget med (du gjettet det) et enkelt <div></div>.

Hvorfor skulle hun gjøre det? Her er en relevant mulighet: det er ingen av vår virksomhet. Vi er fri til å lure, eller til og med spørre om det er gjort med respekt nok. Men gjør det egentlig noe? La oss stoppe kort antar at hun ikke vet hva hun gjør, forutsatt at det er en vridd form av smerte, eller at hun er uvitende om andre teknologier. Sjekk ut for eksempel hvor hun trakk den offisielle SVG-logoen med CSS og en enkelt div. Våknet.

Jeg selv ganske få det. Jeg skrev en hel bok om SVG-fordi jeg tror det er underutnyttet. Er det “CSS-tegninger” som jeg tror ville være bedre som SVG-for en produksjon nettsted som er ment å vare? Sikker.

Hva med denne?

Se Penn Ren CSS Biker av Julia Muzafarova (@miocene) på CodePen.

Jeepers villvin det er noe annet. Jeg ville ha gjettet GreenSock var bak dette på et raskt blikk. Vi snakker om, GreenSock har tatt til orde her på CSS-Triks noen teknikker for smart animasjoner. En del av dette er å bryte animasjoner i delene og sy dem sammen i større tidslinjer for vedlikehold letthet og “uten å bli begravet av prosessen.”

Så, gjorde Julia Muzafarova gjøre det galt? Selvfølgelig ikke. Hvis det er en feil måte å animere en tegneserie hipster på en sykkel i denne verden, er jeg ikke ønsker å bo her lenger. Det er 2,100 linjer av nøyaktig posisjonering, coloring, og animerer. Pokker, det vil fungere i noen e-postklienter hvis du virkelig trenger å klinke til noe “praktisk.”

Sasha Tran, en UI Utvikler på Nivå Studios, delt sin historie om å lage tegninger i CSS siste året. Hun trakk noe nytt hver dag for 20 dager i løpet av Codevember.

Selv om jeg ikke er dyktige i hånd illustrasjoner, det er en måte å uttrykke meg gjennom andre medier. Jeg fant ut at medium for å være i HTML og CSS. Å gå opp i nivå og få til et punkt hvor jeg kunne lage søte kunstverk, jeg fokusert på to ting: det grunnleggende, og konsistens. Arbeid med grunnleggende CSS figurer som rektangler og grunnleggende egenskaper som border-radius overtid ga meg muskel minne til å utvikle seg til mer intrikate illustrasjoner.

Betydelig flatet opp i en måned og utviklet bedre CSS muskel minne. Ikke sant. Sett av former, det er mange måter å bli vanskelig med de i CSS!

Du kan argumentere for at å skyve grenser mot upraktisk er det hones våre ferdigheter for alt det andre arbeidet vi har med å gjøre.

Se Penn CSS3 Termostat av Daniel Stancu (@birkof) på CodePen.

Du kan argumentere for at å tvinge deg selv til restriksjoner er drivstoff for kreativitet.

Se Penn Pixel Hellboy av Servin (@servinnissen) på CodePen.

Du kan argumentere for at strekke hjernen din kreativt i disse tvunget forhold bidrar til å bygge tillit og utvider verktøykassa.

Se Penn Enkel CSS Anker av Joni Trythall (@jonitrythall) på CodePen.

Du kan argumentere for at det er bare litt moro.

Se Penn CSS Ost (eller svamp) av Hugo Giraudel (@HugoGiraudel) på CodePen.