Varför skulle du göra det i CSS?

0
38

Och med det, är det oftast någon form av CSS experiment, ofta en komplicerad ritning eller interaktion.

Har du till exempel sett Lynn Fisher ‘ s extraordinära En Enda Div projekt? Inte bara är alla dessa bilder som dras i bara HTML och CSS, de är alla skapade med (du gissade det) en <div></div>.

Varför skulle hon göra det? Här är en relevant möjligheten: det är ingen i vår verksamhet. Vi är fria att undra på, eller ens be om det sker på ett respektfullt sätt tillräckligt. Men spelar det verkligen roll? Låt oss stanna för antar att hon inte vet vad hon gör, antar att det är en vriden form av smärta, eller att hon är omedveten om andra tekniker. Kolla in de exempel där hon drog den officiella SVG-logotypen med CSS och en enda div. Vaknade.

Jag till och med ganska få det. Jag skrev en hel bok om SVG eftersom jag tycker det är underutnyttjade. Är det “CSS-ritningar” som jag tror skulle vara bättre som en SVG-för en produktion webbplats tänkt att pågå? Säker.

Vad sägs om den här?

Se Pennan Ren CSS Biker av Julia Muzafarova (@miocen) på CodePen.

Jeepers creepers det är något annat. Jag skulle ha gissat GreenSock var bakom detta vid en snabb blick. På tal om, GreenSock har förespråkat här på CSS-Tricks några tekniker för smarta animationer. En del av det är att bryta animationer i delar och sy ihop dem till större och tidsscheman för underhåll av lätthet och “utan att fastna i processen.”

Så gjorde Julia Muzafarova göra det för fel? Naturligtvis inte. Om det är ett fel sätt att animera en tecknad hipster på en cykel i den här världen, jag vill inte leva här längre. Det är 2 100 rader av noggrann positionering, färg, och informationsinsatser. Heck, det kommer att fungera i vissa e-postklienter om du verkligen behöver för att haka på något “användbart.”

Sasha Tran, en UI-utvecklare på Apple, delade med sig av sin berättelse för att skapa ritningar i CSS förra året. Hon drog något nytt varje dag i 20 dagar under Codevember.

Även om jag inte är duktig i hand illustrationer, det är ett sätt att uttrycka mig själv genom andra medier. Jag hittade detta medium för att vara i HTML och CSS. Nivå upp och få till en punkt där jag kunde skapa söta konstverk, fokuserade jag på två saker: grunderna, och konsekvens. Man arbetar med grundläggande CSS former som rektanglar och grundläggande egenskaper som border-radius övertid gav mig muscle memory för att gå vidare till mer komplicerade illustrationer.

Betydligt utjämnas i en månad och har utvecklats bättre CSS muscle memory. Va. På tal om former, det finns massor av sätt att få knepigt med dem i CSS!

Man skulle kunna hävda att tänja gränser mot de opraktiska är det som vässar vår kompetens för allt annat arbete vi har att göra.

Se Pennan CSS3 Termostaten med Daniel Stancu (@birkof) på CodePen.

Man skulle kunna hävda att tvinga dig själv till att begränsningar är bränsle för kreativitet.

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

Man skulle kunna argumentera för att stretching din hjärna på ett kreativt sätt i dessa tvingas förhållanden hjälper till att bygga upp ditt självförtroende och stärker din verktygslåda.

Se Pennan Enkel CSS-Ankare av Joni Trythall (@jonitrythall) på CodePen.

Du skulle kunna hävda att det bara är ganska kul.

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