12 Efek Neon Retro yang Menakjubkan dalam Desain Web

Berevolusi dari tabung Geissler, tanda neon adalah ciri khas Amerika dari tahun 1920-an hingga 60-an. Ini telah menandai beberapa dekade dan menciptakan eranya sendiri yang berbeda – era malam yang cerah dan penuh warna dengan lampu neon di setiap sudut.

Tanpa ragu, tanda neon adalah sesuatu dari masa lalu. Ini identik dengan gaya retro. Tapi itu tidak membosankan seperti barang-barang kuno dari masa lalu yang indah. Ini memiliki semangat; itu memiliki getaran. Sifatnya yang penuh warna dan kepribadiannya yang cerah membuatnya tetap hidup.

Dan meskipun kecenderungan menggunakan tanda neon sedang sekarat dalam kehidupan nyata, memberi jalan ke solusi "hijau" yang lebih canggih dan elegan, masih ada tempat untuk melihatnya di hamparan online. Di sinilah ia dapat membawa karismanya ke dalam permainan. Dan mengingat fakta bahwa gelombang nostalgia telah melanda dunia, tanda neon dapat menjadi kandidat ideal untuk menciptakan desain yang memenuhi arus utama saat ini.

Ada beberapa cara untuk memperkenalkan sentuhan neon retro ke antarmuka Anda. Yang paling jelas dan termudah adalah menggunakannya sebagai pilihan gaya untuk menunjukkan papan nama, tagline, atau hanya detail berbasis teks dari sebuah situs web. Hari ini, kami akan menunjukkan kepada Anda beberapa cuplikan kode luar biasa yang menghidupkan efek ini.

Tanda neon Hot Ones oleh Aaron Minnamon

Proyek Aaron Minnamon memiliki rasa yang berbeda dari gaya urban Amerika tahun 50-an. Itu cerah, berani dan berani. Terlihat autentik, berkat perilaku terampil yang direproduksi dari tanda-tanda neon yang terkenal dengan kedipan konstannya. Animasi kecil namun mengesankan ini dihidupkan dengan bantuan HTML, SCSS, dan JavaScript.

CSS animasi Neon Sign oleh Nodws / Neon dari Las Vegas oleh Riccardo Tartaglia

Baik Nodws, dengan proyek fantastisnya yang didedikasikan untuk Dribble, dan Riccardo Tartaglia, dengan Neonnya yang luar biasa dari Las Vegas, telah mengambil rute tradisional. Mereka telah datang dengan konsep yang secara sempurna meniru rambu-rambu jalan neon konvensional.

Demonya mirip. Masing-masing memiliki tanda neon yang ditempatkan di dinding bata. Keduanya diperkaya dengan dinamika kecil untuk membuat pemandangan terlihat hidup; dan masing-masing memiliki penampilan yang cerah. Para seniman berhasil bertahan hanya dengan beberapa baris kode HTML dan CSS, membuat solusi tidak hanya menyenangkan mata – tetapi juga ringan.

Tanda Neon Vintage oleh Kyle Lavery

Jika Anda membutuhkan nuansa vintage yang tidak salah lagi di situs web Anda, Anda harus mencoba Vintage Neon Sign oleh Kyle Lavery. Ini memancarkan tahun 60-an di semua lini. Tipografi yang digariskan, dibumbui dengan pewarnaan neon dan didukung oleh latar belakang bergaya tabung yang indah terlihat fantastis. Meskipun hurufnya tidak diatur dalam tipe dekoratif, itu pasti akan menambah kesan mewah pada proyek apa pun.

Proyek oleh Prima Utama Apriansyah

Project oleh Prima Utama Apriansyah menampilkan efek neon yang terlihat saat melayang. Ada tiga pilihan warna: merah, biru dan kuning. Masing-masing tampak hebat. Semuanya dibuat dengan HTML dan CSS murni – tidak perlu JavaScript. Keuntungan dari solusi ini adalah efek neon tersembunyi dan mengesankan pengunjung saat terungkap.

Neon Grid Loader oleh Mai El-Awini

Oke, cukup sekian efek teksnya. Mari kita pertimbangkan beberapa cara lain untuk menambahkan beberapa keajaiban fluoresen ke antarmuka. Salah satu alternatifnya adalah menerapkan gaya neon untuk memuat animasi, seperti yang telah dilakukan Mai El-Awini dengan Neon Grid Loader.

Di sini Anda akan menemukan empat loader berbeda yang diikat dengan satu tema dan pewarnaan. Meski primitif, efek neon tentu membawa mereka ke level selanjutnya. Dengan latar belakang gelap, mereka terlihat sangat menakjubkan. Mereka akan menghibur pengunjung sambil menunggu website Anda menyelesaikan semua persiapannya.

Tombol oleh Simone / tombol Neon oleh Elwin van den Hazel

Detail antarmuka lainnya juga dapat memanfaatkan gaya neon. Misalnya, pertimbangkan tombol. Karena ajakan bertindak "hantu" masih populer, efek neon sangat cocok.

Ada dua cuplikan kode yang bagus untuk dicoba: satu dibuat oleh Simone dan satu lagi oleh Elwin van den Hazel. Keduanya termasuk tombol neon yang sederhana, namun elegan dan halus. Sementara yang pertama agak suram karena pewarnaan yang diredam, yang kedua pasti langsung menarik perhatian dengan nada biru cerah dan efek bercahaya. Semuanya dibuat dengan HTML dan CSS murni.

Kotak Dialog Neon oleh Hugo DarbyBrown

Anda dapat menerapkan gaya neon ke kotak dialog juga. Lihat saja Kotak Dialog Neon oleh Hugo DarbyBrown. Penulis telah menyertakan empat panel dialog konvensional. Mereka terlihat berani dan menarik, namun tanpa berteriak di semua lini. Efek neon telah memberi elemen UI dangkal sentuhan yang bagus.

neon hexagrid oleh Matei Copot / Partikel Neon Hex – Rekreasi oleh Brett / untuk sementara oleh Gerard Ferrandez

Meskipun kami menganggap gaya neon sebagai efek yang dapat diterapkan pada detail situs web yang berdiri sendiri (seperti tombol, tipografi, atau pemuat), itu juga dapat dengan mudah membuat latar belakang yang mematikan. Pertimbangkan neon hexagrid oleh Matei Copot, Neon Hex Particles – Recreation oleh Brett dan untuk sementara oleh Gerard Ferrandez.

Matei Copot menawarkan kepada pengunjung online latar belakang gaya sarang lebah yang terinspirasi neon fantastis di mana setiap sel memiliki masa pakainya sendiri. Warnanya berubah dari ungu menjadi pirus dan terlihat menginspirasi.

Konsep Brett memiliki nada misteri. Ini juga didasarkan pada bentuk segi enam, namun kali ini Anda juga dapat melihat animasi pengungkapan. Pola muncul di tengah dan tumbuh ke samping. Ada panel kontrol tempat Anda dapat bermain dengan pengaturan.

Berbeda dengan dua contoh sebelumnya, proyek oleh Gerard Ferrandez menampilkan gaya neon modern. Di sini Anda akan menemukan ribuan partikel kecil yang membentuk persegi panjang. Gunakan kursor mouse Anda untuk mengganggu permukaan datar dan menaikkan gelombang yang ditandai dengan nada seperti neon emas.

Contoh Bersinar

Sementara efek neon tidak melakukan sesuatu yang tidak biasa, itu masih salah satu hal yang langsung menarik perhatian. Ini adalah alat yang hebat untuk membuat detail situs web lebih menonjol.

Ini dapat digunakan untuk mengatur titik fokus atau hanya sedikit membumbui dengan karisma cerah dari alam yang berpendar. Ini sangat cocok dengan tipografi, tombol, dan bahkan latar belakang.

Ya, ia memiliki satu kelemahan besar – ia mengungkapkan keindahan dan potensinya hanya di lingkungan yang gelap. Jadi, jika Anda menggunakan UI yang lebih ringan, maka itu bukan pilihan terbaik. Tetapi jika Anda memiliki beberapa desain gelap dalam pikiran, maka efek neon dapat menjadi instrumen yang sempurna untuk mengesankan pengunjung Anda.