Waarom zou je dat doen in CSS?

0
25

En door dat, het is meestal een soort van CSS experiment, vaak een uitgebreide tekening of interactie.

Bijvoorbeeld, heb je gezien Lynn Fisher ‘ s buitengewone Één Div project? Niet alleen zijn al deze graphics getekend in gewoon HTML en CSS, ze zijn allemaal gemaakt met (je raadt het al) een <div>.

Waarom zou ze dat doen? Hier is een relevante mogelijkheid: het is niemand van ons bedrijf. Wij zijn gratis af te vragen, of vragen zelfs als het is gedaan met respect genoeg. Maar maakt het eigenlijk uit? Laten we stoppen voor de veronderstelling dat ze niet weet wat ze aan het doen is, in de veronderstelling dat hij een verwrongen vorm van pijn, of dat ze niet op de hoogte van andere technologieën. Bekijk het voorbeeld waar ze trok de officiële SVG-logo met CSS en een enkele div. Wakker.

Ik heb zelfs een beetje voor. Ik schreef een heel boek over SVG omdat ik denk dat het weinig gebruikt. Zijn er “CSS tekeningen” dat ik denk dat het beter zou zijn als SVG-voor een productie-site bedoeld? Zeker.

Hoe zit dit?

Zie de Pen Pure CSS Biker door Julia Muzafarova (@mioceen) op CodePen.

Jeepers creepers dat is iets anders. Ik zou hebben geraden GreenSock was achter dit in een oogopslag. Het spreken van, GreenSock bepleit hier op CSS-Tricks sommige technieken voor slimme animaties. Een deel van dat is het breken van animaties in delen en stiksels ze samen in grotere termijnen voor het onderhoud en gemak “zonder vast te lopen door het proces.”

Dus, heeft Julia Muzafarova het verkeerd doet? Natuurlijk niet. Als er een verkeerde manier te animeren een cartoon hipster op een fiets in deze wereld, ik wil niet leven hier meer. Het is van 2.100 lijnen van een zeer nauwkeurige positionering, kleuren en animatie. Ach, het zal werken in sommige e-mailclients als u echt nodig om te klink op iets ‘ praktisch.”

Sasha Tran, een UI developer bij Apple, deelde haar verhaal van het maken van tekeningen in CSS vorig jaar. Ze trok er elke dag iets anders voor 20 dagen in Codevember.

Zelfs als ik niet getalenteerd in hand illustraties, is er een manier om mezelf uit te drukken via andere media. Ik vond dat medium te worden in HTML en CSS. Om het niveau omhoog en naar een punt waar ik het kon maken, leuke illustraties, heb ik me gericht op twee dingen: de basis, en consistentie. Het werken met fundamentele CSS vormen, zoals rechthoeken en elementaire eigenschappen, zoals border-radius overuren gaf me de spier-geheugen om de vooruitgang in meer ingewikkelde illustraties.

Aanzienlijk opgehoogd in een maand en beter ontwikkeld CSS spier-geheugen. Hè. Het spreken van vormen, er zijn tal van manieren om lastige met die in CSS!

Je zou kunnen zeggen dat grenzen verleggen in de richting van het onpraktisch is wat perfectioneert onze vaardigheden voor al dat andere werk dat we moeten doen.

Zie de Pen CSS3 Thermostaat door Daniel Stancu (@birkof) op CodePen.

Je zou kunnen zeggen dat jezelf dwingen in beperkingen is brandstof voor creativiteit.

Zie de Pen Pixel Hellboy door Servin (@servinnissen) op CodePen.

Je zou kunnen zeggen dat je hersens creatief in deze gedwongen voorwaarden helpt bij de opbouw van uw vertrouwen en verbreedt je toolbox.

Zie de Pen Eenvoudige CSS Anker door Joni Trythall (@jonitrythall) op CodePen.

Je zou kunnen zeggen dat het gewoon een beetje plezier.

Zie de Pen CSS Kaas (of spons) door Hugo Giraudel (@HugoGiraudel) op CodePen.