Barion Pixel
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 7 napos ingyenes, alapozó webdesign kurzusunkra!

Kipróbálom

blog

Segédletek Google Update: Közeleg a Page Experience Index

Google Update: Közeleg a Page Experience Index

2021. május 05.

A Google, mindig csak a Google. Lássuk be, a Bing algoritmus mélyreható változtatásairól nem sok teteje lenne cikket írni, az ilyesmi csak szimpla érdekesség. Viszont ha a Google hozzányúl kicsit a mérőszámokhoz, azt túlzások nélkül az egész világgazdaság megérzi. A következő update pedig már az ajtón kopogtat (egy kis haladékkal): az eredetileg 2021 májusra bejelentett […]

Tovább a cikkre