8 CSS dan JavaScript Cuplikan yang Merayakan Synthwave

8 CSS dan JavaScript Cuplikan yang Merayakan Synthwave

Tren desain web tidak selalu mengacu pada apa yang baru. Ambil popularitas gelombang sintetis estetis. Ini mengingatkan kembali ke awal 1980-an – tahun sebelum world wide web bahkan ditemukan.

Ini mencolok dan tidak praktis. Namun sulit untuk menyangkal pesona dan perasaan nostalgia yang ditimbulkannya. Bagi saya, itu memunculkan gambaran tentang Wakil Miamirambut besar, dan suara buatan dari musik gelombang baru.

Untuk desainer web, Synthwave juga menyediakan taman bermain yang bagus untuk eksperimen. Ini adalah tempat untuk bekerja dengan warna, membuat animasi, dan menambahkan interaktivitas. Meskipun menyenangkan di permukaan, ini adalah sarana untuk belajar dan lebih mempertajam keterampilan seseorang.

Jadi, kenakan nuansa keren Anda, buka kerah kemeja Anda, dan jelajahi cuplikan Synthwave super-rad. CSS dan JavaScript tidak pernah terlihat begitu…merah muda!

Untuk kedepannya oleh Jane

Bagi yang belum tahu, cuplikan ini adalah contoh yang sangat baik tentang apa itu Synthwave. Langit gradien merah muda ke ungu, matahari bersinar di kejauhan, dan bumi seperti grid. Penghargaan ini dibuat dengan CSS dan menampilkan pola garis vertikal yang, saat Anda fokuskan, hampir terlihat seperti bergerak.

Lihat Pena ke masa depan oleh Jane

CSS Synthwave oleh Sacha Van den Wyngaert

Putaran tren ini memiliki nuansa fiksi ilmiah klasik. Ini menggunakan transformasi CSS untuk meniru navigasi melalui jalan raya 3D berteknologi tinggi. Meskipun kami tidak tahu apa yang ada di sisi lain, itu pasti tempat yang keren untuk dikunjungi.

Lihat Pena CSS Synthwave oleh Sacha Van den Wyngaert

Adegan Synthwave Tingkat Lanjut oleh Radik

Mari kita bawa ini ke tingkat berikutnya. Bayangkan Anda sedang mengendarai pesawat ruang angkasa, melayang di atas permukaan planet futuristik. Atau mungkin Anda hanya menonton film di TV jadul. Gerakan goyang dan kabur yang didukung JavaScript dengan sempurna menciptakan kembali pengalaman berkerumun di sekitar layar kecil di masa lalu.

Lihat Pena Adegan Synthwave Tingkat Lanjut oleh Radik

Terinspirasi dari Synthwave oleh ltrademark

Di luar garis kisi dan warna cerah, tipografi retro juga merupakan bahan utama Synthwave. Judul dua warna yang gemerlap dalam cuplikan ini akan cocok dengan siaran MTV kuno. Mungkin itu bisa berfungsi sebagai bagian dari film baru yang panas itu Pangeran video?

Lihat Pena Synthwave terinspirasi oleh ltrademark

Saatnya Disko! oleh Rémi Lacorne

Terlepas dari judulnya, disko dan Synthwave bukanlah hal yang sama. Tapi saya tidak akan terlalu kecewa, karena efek teks neon ini luar biasa. Penggunaan transformasi CSS menambah perspektif pada teks, sedangkan laser warna-warni di sebelah kanan sesuai dengan zamannya.

Lihat Pena Saatnya disko! oleh Rémi Lacorne

Lofi Synthwave oleh Vincent Tang

Jika Synthwave datang sedikit terlalu kuat untuk Anda, cuplikan “Lofi” ini mungkin lebih cocok. Ini menawarkan elemen dasar tanpa terlalu sibuk. Bagi mereka yang menginginkan estetika ini, desainnya akan berfungsi dengan baik sebagai judul halaman dan/atau area pahlawan.

Lihat Pena Lofi Synthwave oleh Vincent Tang

Jalan Synthwave oleh Pierre Darrieutort

Oh, jaringan yang indah itu. Ini ditempatkan pada lingkaran tak terbatas dan akan membuat latar belakang animasi yang menyenangkan. Ini juga ringan, berkat konstruksi CSS murninya.

Lihat Pena Jalan Synthwave oleh Pierre Darrieutort

Teks Neon Berkedip Div Tunggal oleh Annie

Ingin memadukan nuansa Synthwave dengan tampilan yang lebih modern? Cuplikan ini memberi Anda yang terbaik dari kedua dunia. Warna retro diberi perubahan, sedangkan teks neon yang berkedip-kedip masih memberikan nuansa tahun 80-an. Anggap ini sebagai putaran baru dan lebih baik pada favorit lama.

Lihat Pena Teks Neon Berkedip Div Tunggal oleh Annie

Kembali ke Masa Lalu, Sambil Menatap Masa Depan

Bahkan jika Anda belum lahir di dekade ini, gaya tahun 1980-an kemungkinan besar telah memengaruhi Anda. Bagaimanapun, fashion adalah siklus. Dan itu membuat dirinya betah di media yang tidak ada saat aslinya masih segar. Volume desain terkait Synthwave yang kami lihat di web adalah buktinya.

Apa yang membuat ini lebih menyenangkan adalah bahwa desainer menggunakan alat dan teknik terbaru yang ditawarkan CSS dan JavaScript. Di satu sisi, ini membantu membuat sesuatu yang lama terasa baru lagi.

Apakah Anda membutuhkan lebih banyak getaran retro? Turun ke kami Koleksi CodePen untuk daftar lengkap hits Synthwave.

Hit play on your imagination