웹 디자인의 12가지 멋진 레트로 네온 효과

가이슬러관에서 발전된 네온사인은 1920년대부터 60년대까지 미국의 특징이었습니다. 그것은 수십 년을 표시했으며 구석구석에 네온 마크 사인이 있는 밝고 다채로운 밤의 시대인 고유한 시대를 만들었습니다.

의심할 여지 없이 네온사인은 과거의 것입니다. 레트로 스타일의 대명사입니다. 그러나 그것은 좋은 옛날의 고풍스러운 물건만큼 둔하지 않습니다. 그것은 묘미를 가지고 있습니다. 분위기가 있습니다. 다채로운 성격과 밝은 성격이 살아 숨쉬고 있습니다.

그리고 네온사인을 사용하는 경향이 실생활에서 사라지고 더 정교하고 우아한 "그린" 솔루션에 자리를 내주고 있지만, 온라인 공간에서는 여전히 이를 볼 수 있는 곳이 있습니다. 여기에서 카리스마를 발휘할 수 있습니다. 그리고 향수의 물결이 세계를 휩쓸었다는 사실을 감안할 때 네온 사인은 오늘날의 주류를 충족시키는 디자인을 만드는 데 이상적인 후보가 될 수 있습니다.

인터페이스에 레트로 형광 터치를 도입하는 방법에는 여러 가지가 있습니다. 가장 분명하고 쉬운 방법은 웹사이트의 명판, 태그라인 또는 텍스트 기반 세부 정보를 표시하기 위한 문체 선택으로 사용하는 것입니다. 오늘 우리는 이 효과에 생명을 불어넣는 몇 가지 훌륭한 코드 조각을 보여드릴 것입니다.

Aaron Minnamon의 Hot One 네온 사인

Aaron Minnamon의 프로젝트는 50년대 미국 도시 스타일의 뚜렷한 감각을 가지고 있습니다. 밝고 대담하며 대담합니다. 끊임없이 깜박이는 것으로 유명한 네온 사인의 동작을 능숙하게 재현하여 실제처럼 보입니다. 작지만 인상적인 이 애니메이션은 HTML, SCSS 및 JavaScript의 도움으로 생생하게 살아났습니다.

Nodws의 CSS 애니메이션 네온 사인 / Riccardo Tartaglia의 라스베가스 네온

환상적인 드리블 전용 프로젝트를 진행하는 Nodws와 라스베거스의 뛰어난 Neon을 제작한 Riccardo Tartaglia 모두 전통적인 방식을 택했습니다. 그들은 기존의 네온 거리 표지판을 완벽하게 모방하는 개념을 생각해 냈습니다.

데모는 비슷해 보입니다. 각 객실에는 벽돌 벽에 네온 사인이 배치되어 있습니다. 둘 다 장면을 생생하게 보이게 하는 작은 역동성으로 풍부합니다. 그리고 각각은 밝은 모습을 가지고 있습니다. 아티스트는 몇 줄의 HTML 코드와 CSS만으로 해결하여 솔루션을 눈을 즐겁게 할 뿐만 아니라 가볍게 만들었습니다.

Kyle Lavery의 빈티지 네온 사인

웹사이트에 확실한 빈티지 느낌이 필요하다면 Kyle Lavery의 Vintage Neon Sign을 사용해 보세요. 모든 면에서 60년대를 물씬 풍깁니다. 네온 컬러링으로 장식되고 아름다운 튜브 스타일의 배경이 뒷받침하는 윤곽이 있는 타이포그래피는 환상적으로 보입니다. 글자가 장식용으로 설정되어 있지는 않지만 의심할 여지 없이 모든 프로젝트에 멋진 느낌을 더할 것입니다.

Prima Utama Apriansyah의 프로젝트

Prima Utama Apriansyah의 프로젝트는 호버링 시 나타나는 네온 효과를 특징으로 합니다. 빨간색, 파란색 및 노란색의 세 가지 색상 옵션이 있습니다. 하나하나 멋져보입니다. 모든 것이 순수한 HTML과 CSS로 만들어지며 JavaScript가 필요하지 않습니다. 이 솔루션의 장점은 네온 효과가 숨겨져 있고 드러나면 방문자에게 깊은 인상을 준다는 것입니다.

Mai El-Awini의 네온 그리드 로더

자, 텍스트 효과로 충분합니다. 인터페이스에 형광 마법을 추가하는 다른 방법을 고려해 보겠습니다. 대안 중 하나는 Mai El-Awini가 Neon Grid Loaders로 수행한 것처럼 애니메이션 로드에 네온 스타일을 적용하는 것입니다.

여기에서 하나의 테마와 색상으로 묶인 4개의 다른 로더를 찾을 수 있습니다. 그것들은 원시적이지만 네온 효과는 확실히 그들을 다음 단계로 데려갑니다. 어두운 배경에서 그들은 단순히 멋지게 보입니다. 그들은 웹 사이트가 모든 준비를 마치기를 기다리는 동안 방문자를 즐겁게 할 것입니다.

Simone의 버튼 / Elwin van den Hazel의 네온 버튼

다른 인터페이스 세부 사항도 네온 스타일의 이점을 얻을 수 있습니다. 예를 들어 버튼을 고려하십시오. "유령" 클릭 유도문안이 여전히 인기가 있기 때문에 네온 효과가 더 적합할 수 없습니다.

시도해 볼 만한 두 가지 훌륭한 코드 조각이 있습니다. 하나는 Simone이 만들고 다른 하나는 Elwin van den Hazel이 만듭니다. 둘 다 심플하면서도 우아하고 미묘한 네온 버튼을 포함하고 있습니다. 첫 번째는 차분한 색상으로 인해 약간 우울한 반면 두 번째는 생생한 블루 톤과 빛나는 효과로 즉시 눈을 사로 잡습니다. 모든 것은 순수한 HTML과 CSS로 만들어집니다.

Hugo DarbyBrown의 네온 대화 상자

네온 스타일을 대화 상자에도 적용할 수 있습니다. Hugo DarbyBrown의 Neon Dialog Boxes를 살펴보십시오. 저자는 4개의 기존 대화 패널을 포함했습니다. 그들은 대담하고 매력적으로 보이지만 모든 면에서 비명을 지르지 않습니다. 네온 효과는 평범한 UI 요소에 멋진 반전을 더했습니다.

네온 헥사그리드 by Matei Copot / Neon Hex Particles – Recreation by Brett / 잠시 동안 Gerard Ferrandez

우리는 네온 스타일을 버튼, 타이포그래피 또는 로더와 같은 웹사이트의 독립형 세부 사항에 적용할 수 있는 효과로 생각하지만 쉽게 멋진 배경을 만들 수도 있습니다. Matei Copot의 네온 헥사그리드, Brett의 Neon Hex Particles – Recreation 및 Gerard Ferrandez의 잠시 동안을 고려하십시오.

Matei Copot은 온라인 방문자에게 각 세포의 수명이 있는 환상적인 네온에서 영감을 받은 벌집 스타일의 배경을 제공합니다. 색상이 보라색에서 청록색으로 바뀌고 영감을 줍니다.

Brett의 개념에는 신비주의가 있습니다. 역시 육각형을 기본으로 하고 있는데 이번에는 공개 애니메이션도 볼 수 있습니다. 패턴은 중앙에 나타나고 측면으로 자랍니다. 설정을 가지고 놀 수 있는 제어판이 있습니다.

앞의 두 가지 예와 달리 Gerard Ferrandez의 프로젝트는 네온 스타일을 현대적으로 재해석한 것이 특징입니다. 여기에서 직사각형을 형성하는 수천 개의 작은 입자를 찾을 수 있습니다. 마우스 커서를 사용하여 평평한 표면을 교란하고 황금 네온 같은 톤으로 표시된 파도를 올립니다.

빛나는 예

네온 효과는 특별한 일을 하지 않지만 여전히 즉시 눈을 사로잡는 것 중 하나입니다. 웹 사이트의 세부 정보를 더 눈에 띄게 만드는 훌륭한 도구입니다.

초점을 설정하는 데 사용하거나 형광등 자연의 밝은 카리스마로 약간의 양념을 칠 수 있습니다. 타이포그래피, 버튼, 심지어 배경과도 완벽하게 어울립니다.

예, 한 가지 큰 단점이 있습니다. 어두운 환경에서만 아름다움과 잠재력을 드러냅니다. 따라서 더 가벼운 UI를 사용하는 경우 최선의 선택이 아닙니다. 그러나 어두운 디자인을 염두에 둔 경우 네온 효과는 방문자에게 깊은 인상을 주는 완벽한 도구가 될 수 있습니다.