Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Inspiráció

CSS Art – Nem hiszel a szemednek

2021. április 09. | Bognár Péter

# # #

Kódolni jó dolog, főleg, ha a kódunk éppen működik… Mindenestre egy kicsit mindig megmarad az emberben a varázslat érzése, hogy a szabályok ügyes csűrésével-csavarásával néhány oldalnyi kód segítségével valójában bármit meg lehet csinálni – és a az ember kisagyában mindig ott motoszkál az a bizonyos érzés, hogy ez valószínűleg még így is semmi ahhoz képest, amit még ki lehetne hozni az egészből…

Valóban, aki már kicsit is belemélyedt a css rejtelmeibe, az pontosan tudja, hogy egy ügyes kóder kezében szinte hihetetlen, milyen profi módon megformázhatók a szöveges és grafikus részek, milyen szuper layoutokat lehet összerakni, sőt, ahogy az közismert, a css kód még egyszerűbb grafikák létrehozására is alkalmas!

Így aztán kicsit sem tűnik meglepőnek, ha meglátunk egy tiszta css-ben, kóddal készült ilusztrációt, mondjuk ezt:

Persze, mindig lehet emelni a tétet, például a szép flat stílusba bele is vihetünk egy kis színátmenetet, és ezzel plasztikusabbá tehetjük az egész grafikát, mint itt Mario fejét:

A flat esztétika és a geometrikus elemek házassága különösen jól megy ipari formák felrajzolásához, bár itt alaposan megnövekedik az apró elemek száma. Ezt láthatjuk ebben a szép retró walkmanban is:

Még nagyobb kihívás egy jól ismert karaktert körvonalazott rajzfilm-stílusban kirajzolni, hiszen itt az arányokra és a pontosságra még precízebben oda kell figyelni: a walkmant nem fogja senki centivel méricskélni, de az látszik, ha Spongyabob nem úgy néz ki, mint megszoktuk. 

És persze, ha már css kód, akkor az animáció is megjelenik az opcióink között – naná, hogy sokan élnek is vele! Ezek az animációs csodák engem különösen emlékeztetnek a régi demoscene világ nagy mutatványaira. (A kép alatti linkekre bökve mozgásban is megnézhetitek az alkotásokat, érdemes!)

A legvégére maradt a legnagyobb durranás, a zseniális Diana Smith munkássága. Hangsúlyozom, a művésznő csakazértis tiszta, kézzel írt kódban alkot, semmi trükk.

A legizgalmasabb ebben a gyűjteményben, hogy a linkek alatt mindegyik műalkotás kódja is megtekinthető, így ha megtaláltad az álladat a padlón, elkezdheted ki is elemezni, hogy valójában hogyan készültek a grafikák.

Iratkozz fel YouTube csatornákra!

blog

Virtuális asszisztens legyél vagy webdesigner?

Virtuális asszisztens legyél vagy webdesigner?

2024. február 01.

Mindkettő fantasztikus lehetőség arra, hogy elhagyd a hagyományos kereteket, mint szoros, rugalmatlan munkaidő, helyhez kötöttség vagy akár a bérplafon. Egy ponton találkozik is a két munkakör, ahol a grafikai munka már az asszisztenciába hajlik – designerként is végezhetsz weboldal adminisztrációt, közösségi média tartalom készítést vagy felügyeletet és virtuális asszisztensként is sokszor találkozni már-már tervezői munkába […]

Tovább a cikkre
Secured By miniOrange