10 Efek Jenis Retro CSS & HTML yang Menakjubkan

Hipstamatic, Spotify, dan sekarang Adidas: tampaknya masyarakat kita memiliki keinginan besar untuk hari tua dan cara lama. Mungkin pasar kita begitu jenuh dengan segala sesuatu yang berteknologi tinggi dan inovatif sehingga kita mulai bosan. Atau mungkin itu hanya sebuah nostalgia dangkal untuk masa lalu ketika segala sesuatu tampak mudah, sederhana dan berwarna mawar. Obsesi saat ini dengan segala sesuatu dari masa lalu baru-baru ini terbukti. Itu dapat dilihat di mana-mana, dan bidang desain web tidak terkecuali.

Faktanya, gaya retro memanifestasikan dirinya dari waktu ke waktu di web. Ini terlihat melalui palet warna retro pastel, efek duotone, cetakan geometris yang terlalu disederhanakan, ilustrasi art-deco, efek kasar dan bising, gambar seperti Polaroid, tata letak yang terinspirasi tabloid, pemandangan yang diambil dari game jadul, dan tentu saja tua- tipografi tepat waktu.

Omong-omong, tipografi adalah salah satu opsi paling populer dalam hal menanamkan nuansa retro yang bersemangat ke dalam sebuah proyek. Hal ini halus dan gurih. Dan, yang paling penting, itu tidak membanjiri atau membebani proyek. Ini adalah sentuhan akhir yang sempurna yang menarik perhatian dan menciptakan suasana yang tepat.

Terlebih lagi, Anda dapat dengan cepat mereproduksi efek dari tahun 80-an atau 90-an dengan bantuan trio tercinta CSS/JS dan SVG. Cukup terapkan efeknya ke kata apa pun dan dapatkan hasil yang diinginkan dalam hitungan detik. Dan Anda tidak perlu dipusingkan dengan pengeditan foto atau program terkait desain seperti Photoshop atau Sketch untuk membuat perubahan. Simpel dan elegan bukan?

Jika Anda salah satu yang menghargai cara menyelesaikan sesuatu ini, kami telah mengumpulkan 10 cuplikan kode dengan efek tipografi retro yang menakjubkan. Mari lihat:

Meninggalkan Negara

Mau tidak mau kami memulai koleksi kami dengan cuplikan kode yang luar biasa ini dari Gabrielle Wee. Proyeknya disebut Left the Country dan terutama terinspirasi oleh horor Duffer Brothers, "Stranger Things". Banyak desainer dan pengembang telah mereproduksinya. Dribbble dan Codepen penuh dengan profesional mengambil intro acara itu. Bahkan ada generator yang dikembangkan oleh Nelson Cash yang memungkinkan Anda membuat ulang logo dengan data Anda dan mengunduh gambarnya. Tetapi jika Anda ingin menghindari segala sesuatu yang statis, cobalah cuplikan kode Wee yang merupakan solusi HTML dan SCSS murni.

Tidak Ada Lowongan 404

No Vacancy 404 oleh Riley Shaw sangat mirip dengan karya sebelumnya oleh Gabrielle Wee. Akarnya terletak pada seni garis luar biasa yang disempurnakan dengan sentuhan bercahaya dan efek kedip untuk realisme yang lebih besar. Ini mengingatkan kita pada semua tanda neon terang yang semakin populer di pertengahan abad yang lalu di Amerika. Padahal, mungkin mereka tidak terlihat seanggun dan sehalus mahakarya Riley Shaw. Solusinya adalah simbiosis keanggunan, kecanggihan, dan daya tarik vintage.

Tanda Neon Vintage

Butuh lebih banyak efek bercahaya dan getaran Amerika? Maka Anda harus mengalihkan perhatian Anda ke Vintage Neon Sign oleh Kyle Lavery. Rasanya seperti keluar dari iklan tahun 60-an yang dipenuhi dengan tanda-tanda bercahaya. Kombinasi cerdas tabung dengan berbagai diameter, efek bercahaya luar biasa, palet warna kontroversial, dan jenis huruf yang luar biasa berhasil, menghasilkan mahakarya bertenaga kode yang luar biasa.

Pemisahan: Space Invaders

Mari kembali ke tahun 80-an dan cuplikan kode yang menampilkan efek tipografi yang dibuat dengan mempertimbangkan periode ini. Pertama dan terpenting, tahun 80-an dan 90-an semuanya tentang video game. Masa kecil kami begitu menggemaskan. Dan Martin Pitt adalah salah satu dari mereka yang berhasil mengingatkan kita tentang hal itu. Splitting: Space Invaders-nya membawa kita kembali ke masa remaja kita. Realisasi ini mempesona dengan getaran positif dan keceriaan. Itu terlihat lucu dan melamun. Itu dibuat dengan bantuan Splitting library, yang membuat manipulasi dengan CSS menjadi mudah.

Bermain dengan Tipografi Retro

Tidak ada tahun 90-an tanpa game arcade yang dimainkan di konsol video game rumahan Atari. Itu hanya sinonim dari tahun 80-an dan 90-an di Dunia Geek. Dan Max Kohler mengetahuinya dengan sangat baik. Codepen-nya yang didedikasikan untuk tipografi retro menampilkan logo Atari yang direproduksi dengan terampil. Anda juga akan menemukan empat efek lainnya yang memberikan sentuhan retro yang menyenangkan pada huruf.

Teks Retro Baru / Tipografi 80-an / 404 SVG

Ada beberapa efek teks fantastis dalam koleksi kami yang mengingatkan beberapa kenangan manis terkait TV. Misalnya, Teks retro baru oleh Vladimir Jovanovic, Tipografi 80-an oleh David Parker dan 404 SVG oleh Marcos Mellado. Sementara dua proyek pertama menggunakan tipografi tebal, permukaan mengkilap, gaya neon, dan pewarnaan drastis untuk getaran intro retro VHS tertentu, yang kedua terasa agak kasar, biasa dan kasar – seperti klip video musik di MTV dari periode itu.

Jenis Huruf Vintage / Judul Vintage yang Mengagumkan

Ini tidak akan menjadi koleksi lengkap efek tipografi retro tanpa beberapa solusi tradisional. Dan kami memiliki dua cuplikan kode yang fantastis: Vintage Typeface oleh Thibault Jan Beyer dan Awesome Vintage Title oleh Kevin Nagata. Keduanya menunjukkan tipografi vintage tradisional, seperti yang biasa kita bayangkan: Ultra-tipis dengan bentuk huruf yang semakin memanjang, sentuhan art-deco yang halus dan tentu saja bayangan yang menjadi jantung dan jiwa dari karya seni. Sedangkan proyek karya Thibault Jan Beyer terlihat klasik dan megah; proyek oleh Kevin Nagata terlihat sedikit modern dengan nada main-main tertentu.

Kembali ke waktu itu

Jika Anda muak dan lelah dengan segala sesuatu yang ultra-modern, canggih, dan mewah, maka inilah saatnya untuk membuang masa kini dan mencari inspirasi di masa lalu. Percayalah, selalu ada kartu as di dalam lubang. Tidak sekali pun gagal menyelamatkan hari.

Ini menawarkan tren dan solusi desainer yang membuat proyek menonjol dari keramaian. Dan efek tipografi retro adalah contoh sempurna untuk itu. Mereka menyambut dan ledakan menyenangkan dari masa lalu yang secara alami menarik perhatian, terasa seperti menghirup udara segar.