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.
