10 Harika CSS ve HTML Retro Tipi Efekt

Hipstamatic, Spotify ve şimdi Adidas: Görünüşe göre toplumumuzun eski günlere ve eski yöntemlere karşı büyük bir özlemi var. Belki de pazarımız yüksek teknolojili ve yenilikçi olan her şeye o kadar doymuş ki sıkılmaya başlıyoruz. Ya da belki de her şeyin kolay, basit ve gül rengi göründüğü eski zamanların banal bir nostaljisidir. Yakın geçmişteki her şeye olan mevcut takıntı açıktır. Her yerde görülebilir ve web tasarım alanı da bir istisna değildir.

Nitekim retro tarz zaman zaman web'de de kendini gösteriyor. Pastel retro renk paletleri, çift tonlu efektler, cesur aşırı basitleştirilmiş geometrik baskılar, art-deco illüstrasyonlar, grenli ve gürültülü efektler, Polaroid benzeri görüntüler, tabloid esinli düzenler, eski okul oyunlarından alınmış manzaralar ve tabii ki eski- zamanlı tipografi.

Konu bir projeye zingy retro hissi vermek söz konusu olduğunda tipografi en popüler seçeneklerden biridir. İnce ve zevkli. Ve en önemlisi, projeyi bunaltmaz veya aşırı yüklemez. Sadece göze çarpan ve uygun bir atmosfer oluşturan mükemmel bir son dokunuş.

Dahası, sevilen CSS/JS ve SVG üçlüsünün yardımıyla 80'lerin veya 90'ların efektlerini hızla yeniden oluşturabilirsiniz. Efekti herhangi bir kelimeye uygulayın ve istediğiniz sonucu saniyeler içinde elde edin. Ayrıca değişiklik yapmak için fotoğraf düzenleme veya Photoshop veya Sketch gibi tasarımla ilgili programlarla uğraşmanıza gerek yok. Sade ve zarif değil mi?

İşlerin bu şekilde yapılmasını takdir eden biriyseniz, harika retro tipografi efektlerine sahip 10 kod parçacığını bir araya getirdik. Hadi bir bakalım:

Ülkeyi terk etti

Gabrielle Wee'nin bu olağanüstü kod parçacığıyla koleksiyonumuzu başlatmadan edemedik. Left the Country adlı projesine öncelikle Duffer Brothers'ın korku filmi “Stranger Things”den ilham alındı. Pek çok tasarımcı ve geliştirici onu yeniden üretti. Dribbble ve Codepen, şovun girişindeki profesyonel çekimlerle dolup taşıyor. Hatta Nelson Cash tarafından geliştirilen ve verilerinizle bir logo oluşturmanıza ve görüntüyü indirmenize izin veren bir jeneratör bile var. Ancak statik olan her şeyden kaçınmak istiyorsanız, Wee'nin saf bir HTML ve SCSS çözümü olan kod parçacığını deneyin.

Boş yer yok 404

Riley Shaw'ın No Vacancy 404'ü, Gabrielle Wee'nin önceki çalışmasına çok benziyor. Kökleri, daha fazla gerçekçilik için parıldayan bir dokunuş ve yanıp sönme efektiyle zenginleştirilmiş muhteşem çizgi sanatında yatmaktadır. Bize geçen yüzyılın ortalarında Amerika'da giderek daha popüler hale gelen tüm o parlak neon tabelaları hatırlatıyor. Yine de, belki de Riley Shaw'un başyapıtı kadar zarif ve zarif görünmüyorlardı. Çözüm, zarafet, incelik ve vintage çekiciliğin bir simbiyozudur.

Vintage Neon Tabela

Daha fazla parlayan efekte ve Amerikan havasına mı ihtiyacınız var? O zaman dikkatinizi Kyle Lavery'den Vintage Neon Sign'a çevirmelisiniz. 60'ların ışıklı tabelalarla dolup taşan reklamlarından fırlamış gibi hissettiriyor. Çeşitli çaplardaki tüplerin akıllı kombinasyonu, muhteşem parlama efekti, tartışmalı renk paleti ve muhteşem yazı tipi hile yapıyor ve kodla çalışan olağanüstü bir başyapıtla sonuçlanıyor.

Bölme: Space Invaders

80'lere ve bu dönem göz önünde bulundurularak yapılmış tipografi efektlerini içeren kod parçacıklarına geri dönelim. Her şeyden önce, 80'ler ve 90'lar video oyunlarıyla ilgiliydi. Çocukluğumuz çok güzeldi. Martin Pitt de bize bunu hatırlatmayı başaranlardan biri. Onun Bölünmesi: Space Invaders bizi gençlerimize geri getiriyor. Bu farkındalık, olumlu hisler ve oyunculukla cezbeder. Sevimli ve rüya gibi görünüyor. CSS ile manipülasyonları kolay peasy yapan Splitting kütüphanesinin yardımıyla oluşturuldu.

Retro Tipografi ile Oynamak

Ev video oyun konsolu Atari'de oynanan atari oyunları olmayan 90'lar yoktur. Geek Dünyasında sadece 80'ler ve 90'ların eş anlamlısıdır. Ve Max Kohler bunu çok iyi biliyor. Retro tipografiye adanmış kod kalemi, ustaca yeniden üretilmiş Atari logosuna sahiptir. Ayrıca yazıya hoş bir retro dokunuş veren dört efekt daha bulacaksınız.

Yeni Retro Metin / 80'ler Tipografi / 404 SVG

Koleksiyonumuzda TV ile ilgili bazı tatlı anıları hatırlatan birkaç harika metin efekti var. Örneğin, Vladimir Jovanovic'in New retro metni, David Parker'ın 80'ler Tipografisi ve Marcos Mellado'nun 404 SVG'si. İlk iki proje belirli bir VHS retro giriş havası için cesur tipografi, parlak yüzey, neon stilizasyon ve sert renklendirme kullanırken, ikincisi biraz rustik, sıradan ve ham hissettiriyor - tıpkı o dönemden MTV'deki müzik video klipleri gibi.

Vintage Yazı Tipi / Müthiş Vintage Başlık

Bu, birkaç geleneksel çözüm olmadan tam bir retro tipografi efektleri koleksiyonu olmazdı. Ve iki harika kod parçacığımız var: Thibault Jan Beyer'den Vintage Typeface ve Kevin Nagata'dan Awesome Vintage Title. Her ikisi de, tıpkı bizim tasavvur etmeye alıştığımız gibi, geleneksel bir vintage yazı tipi gösteriyor: Gittikçe uzayan harf biçimleriyle ultra ince, ince bir art-deco dokunuş ve elbette sanat eserinin kalbi ve ruhu olan bir gölge. Thibault Jan Beyer'in projesi klasik ve görkemli görünse de; Kevin Nagata'nın projesi, belli bir oyuncu tonuyla biraz modern görünüyor.

Zamanda Geri Dön

Ultra-modern, sofistike ve üst düzey her şeyden bıktıysanız ve bıktıysanız, şimdiki zamandan kurtulmanın ve geçmişten ilham almanın zamanı geldi. İnanın bize, her zaman delikte bir as vardır. Bir kez olsun günü kurtarmak başarısız olmaz.

Bir projenin kalabalığın arasından sıyrılmasını sağlayan tasarımcı trendleri ve çözümler sunar. Ve retro tipografi efektleri bunun mükemmel bir örneğidir. Geçmişten gelen, doğal olarak dikkat çeken, temiz bir nefes gibi hissettiren misafirperver ve hoş patlamalardır.