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.
