8 kreat├şvne ├║tr┼żky k├│dov CSS a JS na vytv├íranie pozad├ş v pixeloch

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├Żchto mal├Żch ┼ítvorcov sa zobrazuje na na┼íich obrazovk├ích. V├Żsledkom je, ┼że text aj obr├ízky s├║ neuverite─żne ostr├ę.

Napriek v┼íetkej ┼ípi─Źkovej technol├│gii je st├íle potrebn├ę poveda┼ą nie─Źo o jednoduchosti, ktor├║ prin├í┼ía klasick├ę umenie zalo┼żen├ę na pixeloch. Nielen┼że n├ím to pripom├şna star├ę ─Źasy, ale m├┤┼że to by┼ą aj ├║─Źinn├í technika dizajnu.

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

Jeden pixel na ka┼żd├Ż ├║─Źel

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

Pozri pero
Pixel-Grid (SVG Animations) od Scott Weaver

─îierne obsadenie

Zd├í sa, ┼że prechody a pixely sa nikdy ve─żmi dobre nehodili. Ale v ├ęre brutalistick├ęho dizajnu id├║ spolu ako Mario a Luigi. Tento ├║ryvok ukazuje zauj├şmav├Ż n├íhodn├Ż efekt. Pomocou JavaScriptu rozde─żte pozadie na mal├ę ┼ítvorce s r├┤znymi opacitami. V├Żsledkom je generovan├ę umeleck├ę dielo, ktor├ę ur─Źite up├║ta pozornos┼ą pou┼ż├şvate─ża.

Pozri pero
Pixelated CSS Gradient Generator od Eric Winton

Vkusn├ę obr├ízky

Tu je pr├şklad, ktor├Ż je nepr├şpustn├Ż a je vyroben├Ż s dobr├Żm vkusom. Ve─żk├ę ┼ítvorce mizn├║ v zjavne n├íhodnom vzore, ale na┼í┼ąastie nie s├║ ohromen├ę. To by mohol by┼ą skvel├Ż akcent dizajnu pre oblas┼ą hrdinu, kde je prv├Ż dojem k─ż├║─Źov├Ż.

Pozri pero
RKpBLg od Michaela

Jemn├Ż efekt

Ak h─żad├íte animovan├ę pozadie, ktor├ę neodv├ídza pozornos┼ą od jeho obsahu, stoj├ş za vysk├║┼íanie tento jednoduch├Ż ├║ryvok. Hoci je ┼ít├Żl podobn├Ż predch├ídzaj├║cemu pr├şkladu, l├ş┼íi sa t├Żm, ┼że anim├ícia sa spust├ş iba raz. Posta─Źuje up├║ta┼ą pozornos┼ą bez toho, aby sa pr├şpadn├ę nepohodlie hnutia opakovalo znova a znova.

Pozri pero
Anim├ícia pixelov├ęho pozadia od Orena

Transforma─Źn├í maska

Pixely m├┤┼żu tie┼ż hra┼ą doplnkov├ę ├║lohy v pozad├ş. Pozrite si napr├şklad toto video. Zauj├şmavej┼íie bolo prekrytie vzorom podobn├Żm pixelom, 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 Micah Frost

plaváky

Tento ├║ryvok vynik├í kombin├íciou retro vzh─żadu a modernej funk─Źnosti. Tieto pl├ívaj├║ce pixely, ktor├ę boli vytvoren├ę pomocou ─Źast├şc.js, pripom├şnaj├║ vesm├şrne umenie z 50. a 60. rokov. Umiestnen├şm kurzora nad oblas┼ą a jej pixlov sa zv├Żrazn├ş jasne biela, zatia─ż ─Źo kliknutie ich n├║ti rozpty─żova┼ą.

Pozri pero
pixelov├ę pozadie 2 Alex

Plaid CSS

Pixel art je skvelou vo─żbou pre kockovan├Ż vzor. Jemn├ę rozdiely medzi ┼ítvorcami m├┤┼żu urobi┼ą nie─Źo atrakt├şvne, ale nie realisticky. M├íme tu pomerne jednoduch├Ż a ─Źist├Ż vzorec CSS, ktor├Ż by mohol sl├║┼żi┼ą ako pozadie hrdiny, hlavi─Źka alebo cel├í str├ínka.

Pozri pero
Pixelated pozadie CSS (Camo # 1) od Erika Wiedemana

Urob to v 3D

Pozrime sa na ─Ćal┼í├ş skvel├Ż pr├şklad klasick├ęho stretnutia s modernou. 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 rob├ş prvky na vrchu vzhladom ─Ćaleko. Ur─Źite by to bolo presved─Źiv├ę pozadie.

Pozri pero
Logo Digibilly Pixel v CSS a Jquery s prekryt├şm Joshua Pearsonovou

Flexibiln├í mo┼żnos┼ą financovania

Z├íkladnou v├Żhodou pou┼żitia pozadia zalo┼żen├ęho na pixeloch je ich univerz├ílnos┼ą. M├┤┼żete napr├şklad ├şs┼ą na pozadie, ktor├ę obsahuje ve─ża ┼íikovn├Ż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 n├ípadn├Żm vzorcom alebo tak├Ż, ktor├Ż je predv├şdate─żnej┼í├ş.

Bez oh─żadu na va┼íe potreby existuje verzia techniky, ktor├í sa dokonale hod├ş. Ak teda h─żad├íte nie─Źo, ─Źo pom├┤┼że v├í┼ímu webu vynikn├║┼ą, neprehliadnite mo┼żnosti pixelov.

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