Web Tasarımında 12 Çarpıcı Retro Neon Efekti

Geissler tüpünden evrimleşen neon tabela, 1920'lerden 60'lara kadar Amerika'nın karakteristik bir özelliğiydi. Birkaç on yıla damgasını vurdu ve her köşesinde neon kayan yazı işaretleriyle parlak, renkli gecelerin olduğu bir dönem olan kendi farklı dönemini yarattı.

Şüphesiz, neon tabela geçmişten gelen bir şeydir. Retro tarzı ile eş anlamlıdır. Ama eski güzel günlerdeki arkaik şeyler kadar sıkıcı değil. Bir tadı vardır; bir havası var. Renkli doğası ve parlak kişiliği onu canlı tutar.

Ve neon tabelaları kullanma eğilimi gerçek hayatta ölmekte ve yerini daha sofistike ve zarif “yeşil” çözümlere bırakıyor olsa da, bunu çevrimiçi ortamlarda hala görebileceğiniz yerler var. Burası karizmasını devreye sokabileceği yer. Ve bir nostalji dalgasının dünyayı kasıp kavurduğu gerçeği göz önüne alındığında, neon tabela günümüzün ana akımını karşılayan tasarımlar yaratmak için ideal bir aday olabilir.

Arayüzünüze retro floresan bir dokunuş katmanın birkaç yolu vardır. En belirgin ve en kolay olanı, bir web sitesinin isim levhalarını, etiket satırlarını veya yalnızca metin tabanlı ayrıntılarını göstermek için stilistik bir seçim olarak kullanmaktır. Bugün size bu efekti hayata geçiren bazı mükemmel kod parçacıkları göstereceğiz.

Aaron Minnamon'dan Hot Ones neon tabela

Aaron Minnamon'un projesi, 50'lerin Amerikan kentsel tarzına dair belirgin bir anlayışa sahip. Parlak, cesur ve cüretkardır. Sürekli yanıp sönmeleri ile ünlü neon tabelaların ustaca yeniden üretilmiş davranışları sayesinde gerçek görünüyor. Bu küçük ama etkileyici animasyon HTML, SCSS ve JavaScript yardımıyla hayata geçirildi.

Nodws tarafından CSS animasyonlu Neon Sign / Las Vegas'tan Neon, Riccardo Tartaglia tarafından

Fantastik Dribble özel projesiyle Nodws ve Las Vegas'tan olağanüstü Neon'u ile Riccardo Tartaglia geleneksel bir yol izledi. Geleneksel neon sokak tabelalarını mükemmel bir şekilde taklit eden konseptler buldular.

Demolar birbirine benziyor. Her biri bir tuğla duvara yerleştirilmiş neon tabelalara sahiptir. Her ikisi de sahnenin canlı görünmesini sağlamak için küçük dinamiklerle zenginleştirilmiştir; ve her biri parlak bir görünüme sahiptir. Sanatçılar, yalnızca birkaç satır HTML kodu ve CSS kullanarak, çözümleri yalnızca göze hoş gelen değil, aynı zamanda hafif hale getirmeyi başardılar.

Kyle Lavery'den Vintage Neon Tabela

Web sitenizde benzersiz bir vintage hissine ihtiyacınız varsa, Kyle Lavery'den Vintage Neon Sign'ı denemelisiniz. 60'ları tüm cephelerde yansıtıyor. Neon renklendirme ile renklendirilmiş ve tüp tarzı güzel bir arka planla desteklenen ana hatlarıyla belirlenmiş tipografi harika görünüyor. Harfler dekoratif tipte ayarlanmamış olsa da, şüphesiz herhangi bir projeye biraz süslü bir his katacaktır.

Prima Utama Apriansyah'ın projesi

Prima Utama Apriansyah'ın projesi, üzerine gelindiğinde ortaya çıkan bir neon efektine sahiptir. Üç renk seçeneği vardır: kırmızı, mavi ve sarı. Her biri harika görünüyor. Her şey saf HTML ve CSS ile yapılır - JavaScript gerekmez. Bu çözümün avantajı, neon efektinin gizlenmesi ve ortaya çıktığında ziyaretçileri etkilemesidir.

Mai El-Awini'den Neon Izgaralı Yükleyiciler

Tamam, metin efektleri bu kadar yeter. Arayüze biraz floresan büyüsü eklemenin başka yollarını düşünelim. Alternatiflerden biri, Mai El-Awini'nin Neon Grid Loaders ile yaptığı gibi, yükleme animasyonlarına bir neon stili uygulamaktır.

Burada bir tema ve renklendirme ile bağlanmış dört farklı yükleyici bulacaksınız. İlkel olmalarına rağmen, neon etkisi kesinlikle onları bir sonraki seviyeye taşıyor. Karanlık bir arka plana karşı, tek kelimeyle muhteşem görünüyorlar. Web sitenizin tüm hazırlıklarını tamamlamasını beklerken ziyaretçileri eğlendireceklerdir.

Simone'dan düğme / Elwin van den Hazel'den Neon düğme

Diğer arayüz detayları da neon tarzından yararlanabilir. Örneğin, düğmeleri düşünün. "Hayalet" harekete geçirici mesajlar hala popüler olduğundan, neon efekti bundan daha uygun olamazdı.

Denemek için iki mükemmel kod parçacığı vardır: biri Simone tarafından, diğeri ise Elwin van den Hazel tarafından yapılmıştır. Her ikisinde de basit ama zarif ve zarif bir neon düğme bulunur. İlki, sessiz renklendirme nedeniyle biraz kasvetli olsa da, ikincisi canlı mavi tonu ve ışıltılı etkisi ile hemen göze çarpıyor. Her şey saf HTML ve CSS ile yapılır.

Hugo DarbyBrown'dan Neon Diyalog Kutuları

Neon stilini iletişim kutularına da uygulayabilirsiniz. Hugo DarbyBrown'ın Neon Diyalog Kutularına bir göz atın. Yazar, dört geleneksel diyalog paneli eklemiştir. Cesur ve çekici görünüyorlar, ancak tüm cephelerde çığlık atmıyorlar. Neon efekti, banal UI öğelerine hoş bir dokunuş kattı.

Matei Copot tarafından neon hexagrid / Neon Hex Particles - Brett tarafından Rekreasyon / bir süre Gerard Ferrandez tarafından

Neon stillerini bir web sitesinin bağımsız ayrıntılarına (düğmeler, tipografi veya yükleyici gibi) uygulanabilecek bir efekt olarak görsek de, kolayca harika bir arka plan da oluşturabilir. Matei Copot'tan neon hexagrid'i, Brett'ten Neon Hex Particles - Recreation'ı ve bir süreliğine Gerard Ferrandez'i düşünün.

Matei Copot, çevrimiçi ziyaretçilere, her hücrenin kendi ömrüne sahip olduğu, neon esinli, petek tarzı fantastik bir arka plan sunuyor. Renk mordan turkuaza dönüşür ve ilham verici görünür.

Brett'in konseptinde bir gizem notu var. Ayrıca altıgen bir şekle dayanmaktadır, ancak bu sefer bir açıklama animasyonu da görebilirsiniz. Desen ortada görünür ve yanlara doğru büyür. Ayarlarla oynayabileceğiniz bir kontrol paneli var.

Önceki iki örnekten farklı olarak, Gerard Ferrandez'in projesi neon tarzına modern bir yorum getiriyor. Burada bir dikdörtgen oluşturan binlerce küçük parçacık bulacaksınız. Düz yüzeyi bozmak ve altın neon benzeri tonla işaretlenmiş bir dalga yükseltmek için fare imlecinizi kullanın.

Parlayan Örnekler

Neon efekti olağandışı bir şey yapmazken, yine de anında göze çarpan şeylerden biri. Bir web sitesinin ayrıntılarını daha belirgin hale getirmek için harika bir araçtır.

Odak noktalarını ayarlamak veya sadece floresan doğasının parlak karizması ile işleri biraz renklendirmek için kullanılabilir. Tipografi, düğmeler ve hatta arka planlarla mükemmel uyum sağlar.

Evet, büyük bir dezavantajı var - güzelliğini ve potansiyelini sadece karanlık bir ortamda ortaya koyuyor. Bu nedenle, daha hafif bir kullanıcı arayüzü kullanıyorsanız, bu en iyi seçim değildir. Ancak aklınızda karanlık tasarımlar varsa, neon efekti ziyaretçilerinizi etkilemek için mükemmel bir araç olabilir.