8 kreatywnych fragmentów CSS i JS do tworzenia tła z pikselami

Piksele s─ů elementami sk┼éadowymi wi─Ökszo┼Ťci tego, co widzimy online. Im bardziej zaawansowana technologia wy┼Ťwietlania, tym wi─Öcej tych ma┼éych kwadrat├│w jest wy┼Ťwietlanych na naszych ekranach. W rezultacie tekst i obrazy s─ů niezwykle ostre.

Mimo tego zaawansowanego technologicznie pi─Ökna mo┼╝na powiedzie─ç o prostocie, jak─ů przynosi klasyczna sztuka oparta na pikselach. Nie tylko przypomina nam dawne czasy, ale mo┼╝e by─ç r├│wnie┼╝ skuteczn─ů technik─ů projektowania.

Co prowadzi nas do dzisiejszego tematu: wykorzystanie pikseli jako t┼éa. W odpowiednim projekcie mog─ů doda─ç element zabawy i zaskakuj─ůc─ů kreatywno┼Ť─ç. Rzu─çmy okiem na niekt├│re fragmenty kodu, kt├│re pokazuj─ů potencja┼é piksela.

Jeden piksel na ka┼╝dy cel

Ten wieloaspektowy przyk┼éad pokazuje szeroki zakres opcji wygl─ůdu i animacji. U┼╝yj menu ustawie┼ä wst─Öpnych, aby wybiera─ç spo┼Ťr├│d ponad 10 r├│┼╝nych ┼Ťrodowisk SVG. Wiele z nich przypomina gr─Ö wideo w stylu retro, a niekt├│re s─ů bardziej odpowiednie do codziennego u┼╝ytku ni┼╝ inne. W ka┼╝dym razie ta kolekcja stanowi solidny fundament tego, co mo┼╝liwe.

Zobacz pi├│ro
Pixel-Grid (SVG Animations), autor: Scott Weaver

Czarna obsada

Gradienty i piksele nigdy nie wydawa┼éy si─Ö dobrze pasowa─ç. Ale w erze brutalistycznego designu id─ů w parze, podobnie jak Mario i Luigi. Ten fragment pokazuje interesuj─ůcy efekt losowy. U┼╝yj JavaScript, aby podzieli─ç t┼éo na ma┼ée kwadraty o r├│┼╝nych nieprzezroczysto┼Ťciach. Rezultatem jest wygenerowane dzie┼éo sztuki, kt├│re z pewno┼Ťci─ů przyci─ůgnie uwag─Ö u┼╝ytkownika.

Zobacz pi├│ro
Pixelated CSS Gradient Generator autorstwa Erica Wintona

Gustowne zdj─Öcia

Oto przyk┼éad, kt├│ry jest nie do pomini─Öcia i wykonany z dobrym gustem. Du┼╝e kwadraty blakn─ů w pozornie losowy spos├│b, ale na szcz─Ö┼Ťcie nie s─ů przyt┼éoczone. Mo┼╝e to by─ç ┼Ťwietny akcent projektowy w obszarze bohatera, w kt├│rym pierwsze wra┼╝enie jest kluczowe.

Zobacz pi├│ro
RKpBLg autorstwa Michaela

Subtelny efekt

Je┼Ťli szukasz animowanego t┼éa, kt├│re nie odwraca uwagi od jego zawarto┼Ťci, warto zapozna─ç si─Ö z tym prostym fragmentem. Chocia┼╝ jest podobny w stylu do poprzedniego przyk┼éadu, r├│┼╝ni si─Ö tym, ┼╝e animacja jest uruchamiana tylko raz. Wystarczy zwr├│ci─ç uwag─Ö bez potencjalnego dyskomfortu powtarzaj─ůcego si─Ö ruchu.

Zobacz pi├│ro
Animacja tła piksela autorstwa Orena

Transformuj─ůca maska

Piksele mog─ů tak┼╝e odgrywa─ç uzupe┼éniaj─ůce si─Ö role w tle. Na przyk┼éad obejrzyj ten film. Sta┼éo si─Ö bardziej interesuj─ůce dzi─Öki pikselowej nak┼éadce z wzorem, kt├│ra mo┼╝e by─ç u┼╝ywana do wy┼Ťwietlania prostego logo, symbolu lub czego┼Ť bardziej losowego. Jeszcze lepsze jest to, ┼╝e ten konkretny przyk┼éad zmienia kszta┼ét. Kliknij dowolne miejsce w filmie, aby zobaczy─ç zmian─Ö wzoru.

Zobacz pi├│ro
KaozXe autorstwa Micah Frost

Pływaki

To, co wyr├│┼╝nia ten fragment, to po┼é─ůczenie stylu retro i nowoczesnej funkcjonalno┼Ťci. Te p┼éywaj─ůce piksele, utworzone za pomoc─ů cz─ůstek.js, przypominaj─ů grafik─Ö kosmiczn─ů z lat 50. i 60. Najed┼║ kursorem na obszar, a jego piksele zostan─ů pod┼Ťwietlone na jasn─ů biel, a klikni─Öcie zmusza je do rozproszenia.

Zobacz pi├│ro
tło piksela 2 autorstwa Alexa

Plaid CSS

Grafika pikselowa jest ┼Ťwietn─ů opcj─ů dla wzoru w kratk─Ö. Subtelne r├│┼╝nice mi─Ödzy kwadratami mog─ů uczyni─ç co┼Ť atrakcyjnym, ale nie realistycznym. Tutaj mamy do┼Ť─ç prosty i czysty wzorzec CSS, kt├│ry mo┼╝e s┼éu┼╝y─ç jako t┼éo bohatera, nag┼é├│wek lub ca┼éa strona.

Zobacz pi├│ro
Pixelated CSS Background (Camo # 1) autorstwa Erika Wiedemana

Zr├│b to w 3D

Rzu─çmy okiem na kolejny ┼Ťwietny przyk┼éad klasycznego spotkania z nowoczesnym. To logo sta┼éo si─Ö interaktywnym arcydzie┼éem 3D dzi─Öki CSS i jQuery. Najechanie kursorem na kwadrat o┼Ťwietla go, a zmieniona perspektywa sprawia, ┼╝e ÔÇőÔÇőelementy u g├│ry wygl─ůdaj─ů na odleg┼ée. Z pewno┼Ťci─ů by┼éoby to interesuj─ůce t┼éo.

Zobacz pi├│ro
Logo Digibilly Pixel w CSS i Jquery z nak┼éadk─ů Joshua Pearson

Elastyczna opcja dla funduszy

Nieod┼é─ůczn─ů zalet─ů korzystania z t┼éa opartego na pikselach jest ich uniwersalno┼Ť─ç. Mo┼╝esz na przyk┼éad przej┼Ť─ç z t┼éem, kt├│re zawiera wiele fajnych animacji. A mo┼╝e wolisz co┼Ť ca┼ékowicie statycznego. Nast─Öpnie istnieje wyb├│r pomi─Ödzy bardzo losowym i uderzaj─ůcym wzorem lub bardziej przewidywalnym.

Niezale┼╝nie od twoich potrzeb, istnieje odpowiednia wersja techniki. Wi─Öc je┼Ťli szukasz czego┼Ť, co pomo┼╝e Twojej witrynie wyr├│┼╝ni─ç si─Ö, nie zapomnij o mo┼╝liwo┼Ťciach pikseli.

Chcesz zobaczy─ç wi─Öcej przyk┼éad├│w? Sp├│jrz na nasz─ů kolekcj─Ö t┼éa pikseli CodePen.