Pixel adalah blok bangunan dari banyak hal yang kita lihat online. Dan semakin maju teknologi layar, semakin banyak kotak kecil ini ditampilkan di layar kami. Hasilnya adalah teks dan gambar sangat tajam.
Namun, terlepas dari semua keindahan teknologi tinggi itu, ada sesuatu yang bisa dikatakan untuk kesederhanaan yang dibawa oleh seni berbasis piksel klasik. Tidak hanya mengingatkan kita pada masa lalu, tetapi juga bisa menjadi teknik desain yang efektif.
Yang membawa kita ke topik hari ini: penggunaan piksel sebagai latar belakang. Dalam proyek yang tepat, mereka dapat menambahkan elemen kesenangan dan jumlah kreativitas yang mengejutkan. Mari kita lihat beberapa cuplikan kode yang menunjukkan potensi piksel.
Satu piksel untuk setiap tujuan
Contoh multifaset ini menunjukkan berbagai pilihan tampilan dan animasi. Gunakan menu preset untuk memilih dari lebih dari 10 latar belakang SVG yang berbeda. Banyak yang mengingatkan pada video game retro, dan beberapa lebih cocok untuk penggunaan sehari-hari daripada yang lain. Bagaimanapun, koleksi ini memberikan dasar yang kuat tentang apa yang mungkin.
Lihat pena
Pixel-Grid (Animasi SVG) oleh Scott Weaver
Pemain hitam
Gradien dan piksel sepertinya tidak pernah cocok. Namun di era desain brutal, mereka pergi bersama seperti Mario dan Luigi. Cuplikan ini menunjukkan efek acak yang menarik. Gunakan JavaScript untuk membagi latar belakang menjadi kotak kecil dengan kekeruhan yang berbeda. Hasilnya adalah karya seni yang dihasilkan yang pasti akan menarik perhatian pengguna.
Lihat pena
Pixelated CSS Gradient Generator oleh Eric Winton
Gambar berselera tinggi
Berikut adalah contoh yang tidak dapat dilakukan dan dilakukan dengan selera yang baik. Kotak besar memudar dalam pola yang tampaknya acak, tetapi untungnya mereka tidak kewalahan. Ini bisa menjadi aksen desain yang bagus untuk area pahlawan, di mana kesan pertama adalah kuncinya.
Lihat pena
RKpBLg oleh Michael
Efek yang halus
Jika Anda mencari latar belakang beranimasi yang tidak mengganggu kontennya, cuplikan sederhana ini layak untuk dicoba. Walaupun mirip dengan contoh sebelumnya, berbeda karena animasinya hanya berjalan satu kali. Cukuplah untuk mendapatkan perhatian tanpa potensi ketidaknyamanan dari gerakan yang berulang-ulang.
Lihat pena
Pixel Background Animation oleh Oren
Masker transformasi
Pixel juga dapat memainkan peran pelengkap dalam latar belakang. Misalnya, tonton video ini. Itu dibuat lebih menarik dengan overlay pola seperti pixel yang dapat digunakan untuk menampilkan logo, simbol, atau sesuatu yang lebih acak. Yang lebih baik lagi adalah bahwa contoh khusus ini berubah bentuk. Klik di mana saja di video untuk melihat perubahan pola.
Lihat pena
KaozXe oleh Micah Frost
Mengapung
Apa yang membuat cuplikan ini menonjol adalah kombinasi antara tampilan retro dan fungsionalitas modern. Dibuat dengan partikel.js, piksel mengambang ini mengingatkan akan seni ruang angkasa dari tahun 50-an dan 60-an. Arahkan kursor ke area dan pikselnya akan berwarna putih cerah, sementara bunyi klik memaksa mereka untuk berhamburan.
Lihat pena
background pixel 2 oleh Alex
Kotak-kotak CSS
Pixel art adalah pilihan bagus untuk pola berpetak-petak. Perbedaan halus antara kotak dapat membuat sesuatu yang menarik, tetapi tidak secara realistis. Di sini kita memiliki pola CSS yang cukup sederhana dan murni yang dapat berfungsi sebagai latar belakang pahlawan, tajuk, atau halaman penuh.
Lihat pena
Latar Belakang CSS Pixelated (Camo # 1) oleh Erik Wiedeman
Lakukan dalam 3D
Mari kita lihat contoh hebat lain dari pertemuan klasik-modern. Logo ini telah menjadi karya 3D interaktif, berkat CSS dan jQuery. Melayang di atas kotak menyala, sementara perspektif yang berubah membuat elemen-elemen di atas terlihat jauh. Itu tentu akan menjadi latar belakang yang menarik.
Lihat pena
Logo Digibilly Pixel dalam CSS dan Jquery dengan overlay oleh Joshua Pearson
Opsi fleksibel untuk dana
Keuntungan inheren menggunakan latar belakang berbasis pixel adalah fleksibilitasnya. Misalnya, Anda dapat menggunakan latar belakang yang menampilkan banyak animasi yang bagus. Atau mungkin Anda lebih suka sesuatu yang sepenuhnya statis. Lalu ada pilihan antara pola yang sangat acak dan mencolok atau yang lebih mudah diprediksi.
Terlepas dari kebutuhan Anda, ada versi teknik yang sangat cocok. Jadi, jika Anda mencari sesuatu untuk membantu situs Anda menonjol, jangan mengabaikan kemampuan piksel.
Apakah Anda ingin melihat lebih banyak contoh? Lihatlah koleksi latar belakang piksel CodePen kami.
