8 kreat├şvne ├║tr┼żky CSS a JS na vytv├íranie pixelovan├ęho pozadia

Pixely s├║ stavebn├Żmi kame┼łmi v├Ą─Ź┼íiny toho, ─Źo vid├şme online. A ─Ź├şm pokro─Źilej┼íia je technol├│gia displeja, t├Żm viac t├Żch mal├Żch ┼ítvorcov je zobrazen├Żch na na┼íich obrazovk├ích. V├Żsledkom je, ┼że text a obr├ízky s├║ neuverite─żne ostr├ę.

Napriek v┼íetkej kr├íse vyspel├Żch technol├│gi├ş je st├íle potrebn├ę poveda┼ą nie─Źo o jednoduchosti, ktor├║ prin├í┼ía klasick├ę umenie zalo┼żen├ę na pixeloch. Nielen, ┼że sa podob├í star├Żm ─Źasom, ale m├┤┼że by┼ą aj ├║─Źinnou technikou dizajnu.

─îo n├ís priv├ídza k dne┼ínej t├ęme: pou┼żitie pixelov ako pozadia. V spr├ívnom dizajne m├┤┼żu prida┼ą prvok z├íbavy a ├║┼żasn├ę mno┼żstvo kreativity. Pozrime sa na niektor├ę ├║tr┼żky k├│du, ktor├ę ukazuj├║ potenci├íl pixla.

Jeden pixel na v┼íetky ├║─Źely

Tento mnohostrann├Ż pr├şklad ukazuje ┼íirok├║ ┼ík├ílu mo┼żnost├ş vzh─żadu a anim├ície. Pou┼żite preddefinovan├║ ponuku na v├Żber z viac ako 10 r├┤znych pozad├ş SVG. Mnoh├ę sa podobaj├║ retro videohr├ím a niektor├ę s├║ vhodnej┼íie na ka┼żdodenn├ę pou┼żitie ako in├ę. V ka┼żdom pr├şpade t├íto zbierka poskytuje pevn├Ż z├íklad pre to, ─Źo je mo┼żn├ę.

Pozri Pixel-Grid Pen (SVG Animations) od Scott Weavera

─îierne obsadenie

Zdalo sa, ┼że prechody a pixely sa navz├íjom ve─żmi dobre nezmestili. Ale v dobe brut├ílneho dizajnu id├║ spolu ako Mario a Luigi. Tento v├Ż┼łatok ukazuje zauj├şmav├Ż n├íhodn├Ż efekt. Pomocou JavaScriptu rozde─żte pozadie na mal├ę ┼ítvorce s r├┤znymi opacitami. V├Żsledkom je umeleck├ę dielo, ktor├ę ur─Źite up├║ta pozornos┼ą pou┼ż├şvate─ża.

Pozrite sa na generátora gradientu CSS od Eric Wintona

Vkusn├ę obr├ízky

Toto je nepr├şpustn├Ż a vkusne uroben├Ż pr├şklad. Ve─żk├ę ┼ítvorce mizn├║ v zjavne n├íhodnom vzore, ale na┼í┼ąastie nie s├║ pre┼ąa┼żen├ę. To by mohol by┼ą vynikaj├║ci akcent dizajnu v oblasti hrdinov, kde je nevyhnutn├Ż prv├Ż dojem.

Pozri Michaelovo RKpBLg pero

Jemn├Ż efekt

Ak h─żad├íte animovan├ę pozadie, ktor├ę nenaru┼íuje v├í┼í obsah, oplat├ş sa vysk├║┼ía┼ą tento jednoduch├Ż ├║tr┼żok. Hoci m├í podobn├Ż ┼ít├Żl ako v predch├ídzaj├║com pr├şklade, je odli┼ín├Ż, preto┼że anim├ícia sa spust├ş iba raz. Posta─Źuje pritiahnu┼ą pozornos┼ą bez mo┼żn├ęho nepohodlia pohybu, ak sa opakuje znova a znova.

Pozrite si anim├íciu Oren’s Feather pixel na pozad├ş

Transforma─Źn├í maska

Pixely m├┤┼żu tie┼ż hra┼ą doplnkov├ę ├║lohy na pozad├ş. Pozrite si napr├şklad toto video. Zauj├şmavos┼ąou bolo prekrytie vzoru podobn├ęho pixelu, ktor├ę bolo mo┼żn├ę pou┼żi┼ą na zobrazenie jednoduch├ęho loga, symbolu alebo nie─Źoho n├íhodnej┼íieho. E┼íte lep┼íie je, ┼że tento konkr├ętny pr├şklad men├ş tvar. Kliknut├şm kamko─żvek na video zobraz├şte zmenu vzoru.

Pozri pero KaozXe od spolo─Źnosti Micah Frost

Floaters

To, ─Źo zd├┤raz┼łuje tento ├║sek, je kombin├ícia retro vzh─żadu a modern├Żch funkci├ş. Tieto pl├ívaj├║ce pixely, ktor├ę boli vytvoren├ę pomocou funkcie Particles.js, sa podobaj├║ priestorov├ęmu umeniu 50 a 60 s. Umiestnen├şm kurzora nad oblas┼ą a jej pixelov bude zv├Żraznen├í jasne bielou farbou, zatia─ż ─Źo kliknutie ich n├║ti sa ┼í├şri┼ą.

Pozrite sa na pozadie peria 2 Alex

CSS Manta

Pixel art je vynikaj├║cou vo─żbou pre ┼íachovnicu. V─Ćaka jemn├Żm rozdielom medzi ┼ítvorcami m├┤┼że by┼ą atrakt├şvny, ale nie realistick├Ż. M├íme tu ve─żmi jednoduch├Ż a ─Źist├Ż vzorec CSS, ktor├Ż m├┤┼że sl├║┼żi┼ą ako pozadie, hlavi─Źka alebo cel├í str├ínka hrdinu.

Pozrite si pero na pozad├ş Pixelated CSS (Camo # 1) od Erika Wiedemana

Urob to v 3D

Pozrime sa na ─Ćal┼í├ş skvel├Ż pr├şklad klasick├ęho a modern├ęho umenia. Toto logo sa v─Ćaka CSS a jQuery stalo interakt├şvnym 3D majstrovsk├Żm dielom. Vzhladom na n├ímestie sa rozsvieti, zatia─ż ─Źo zmenen├í perspekt├şva sp├┤sobuje, ┼że prvky na vrchu vyzeraj├║ vzdialen├ę. Ur─Źite by to bol presved─Źiv├Ż scen├ír.

Pozrite si logo s logom Digibilly Pixel v ─Źasti CSS a Jquery s prekryt├şm Joshua Pearson

Flexibiln├í mo┼żnos┼ą financovania

Z├íkladnou v├Żhodou pou┼żitia pozadia zalo┼żen├ęho na pixeloch je ich univerz├ílnos┼ą. M├┤┼żete napr├şklad pou┼żi┼ą pozadie s mno┼żstvom skvel├Żch anim├íci├ş. Alebo mo┼żno d├ívate prednos┼ą nie─Źomu ├║plne statick├ęmu. Potom je na v├Żber medzi ve─żmi n├íhodn├Żm a p├┤sobiv├Żm vzorom alebo tak├Ż, ktor├Ż je predv├şdate─żnej┼í├ş.

Bez oh─żadu na va┼íe potreby je k dispoz├şcii verzia techniky, ktor├í sa v├ím dokonale hod├ş. Ak teda h─żad├íte nie─Źo, ─Źo by pomohlo va┼íej str├ínke vynikn├║┼ą, neprehliadnite funkcie pixlov.

Chcete vidie┼ą viac pr├şkladov? Prezrite si na┼íu zbierku pixelov├Żch pozad├ş CodePen.