12 потрясающих ретро-неоновых эффектов в веб-дизайне

Разработанная на основе трубки Гейсслера неоновая вывеска была характерной чертой Америки с 1920-х по 60-е годы. Он отметил несколько десятилетий и создал свою особую эпоху — эпоху ярких красочных ночей с неоновыми шатрами на каждом углу.

Без сомнения, неоновая вывеска — это прошлый век. Это синоним стиля ретро. Но это не так скучно, как архаичные вещи из старых добрых времен. В нем есть изюминка; у него есть вибрация. Его красочная природа и яркая индивидуальность поддерживают его жизнь.

И хотя тенденция использования неоновой вывески в реальной жизни отмирает, уступая место более изысканным и элегантным «зеленым» решениям, на онлайн-пространствах еще есть где ее увидеть. Здесь он может проявить свою харизму. А учитывая тот факт, что мир захлестнула волна ностальгии, неоновая вывеска может стать идеальным кандидатом для создания дизайна, отвечающего мейнстриму сегодняшнего дня.

Есть несколько способов привнести ретро флуоресцентный штрих в ваш интерфейс. Самый очевидный и простой из них — использовать его в качестве стилистического выбора для отображения табличек с именами, слоганов или просто текстовых деталей веб-сайта. Сегодня мы собираемся показать вам несколько отличных фрагментов кода, которые воплощают этот эффект в жизнь.

Неоновая вывеска Hot Ones от Аарона Миннамона

В проекте Аарона Миннамона отчетливо чувствуется американский городской стиль 50-х годов. Он яркий, смелый и дерзкий. Выглядит аутентично, благодаря искусно воспроизведенному поведению неоновых вывесок, которые славятся своим постоянным миганием. Эта небольшая, но впечатляющая анимация была воплощена в жизнь с помощью HTML, SCSS и JavaScript.

CSS-анимация Neon Sign от Nodws / Neon from Las Vegas от Riccardo Tartaglia

И Nodws с его фантастическим проектом, посвященным Dribble, и Riccardo Tartaglia с его выдающимся Neon из Лас-Вегаса пошли традиционным путем. Они придумали концепции, которые идеально имитируют обычные неоновые уличные вывески.

Демо похожи. Каждый из них имеет неоновые вывески, размещенные на кирпичной стене. Оба обогащены крошечной динамикой, чтобы сцена выглядела живой; и каждый имеет яркую внешность. Художникам удалось обойтись всего несколькими строками HTML-кода и CSS, что сделало решения не только привлекательными, но и легкими.

Винтажная неоновая вывеска Кайла Лавери

Если вам нужно безошибочное винтажное ощущение на вашем веб-сайте, попробуйте Vintage Neon Sign от Kyle Lavery. Он излучает 60-е годы во всех отношениях. Очерченная типографика, приправленная неоновой расцветкой и поддерживаемая красивым фоном в стиле трубки, выглядит фантастически. Несмотря на то, что надпись не выполнена декоративным шрифтом, она, несомненно, добавит изюминку любому проекту.

Проект Примы Утамы Априансях

В проекте Prima Utama Apriansyah реализован неоновый эффект, который проявляется при наведении курсора. Есть три варианта цвета: красный, синий и желтый. Каждый выглядит великолепно. Все сделано с использованием чистого HTML и CSS — JavaScript не требуется. Преимущество этого решения в том, что неоновый эффект скрыт и впечатляет посетителей при раскрытии.

Загрузчики Neon Grid от Mai El-Awini

Ладно, хватит текстовых эффектов. Давайте рассмотрим другие способы добавления флуоресцентной магии в интерфейс. Одна из альтернатив — применить неоновый стиль к анимации загрузки, как это сделала Май Эль-Авини с Neon Grid Loaders.

Здесь вы найдете четыре разных загрузчика, которые связаны одной темой и расцветкой. Несмотря на то, что они примитивны, неоновый эффект, безусловно, выводит их на новый уровень. На темном фоне они смотрятся просто сказочно. Они будут развлекать посетителей, пока они ждут, пока ваш сайт завершит все приготовления.

Пуговица от Симоны / Неоновая пуговица от Элвина ван ден Хейзела

Другие детали интерфейса также могут выиграть от неонового стиля. Например, рассмотрим кнопки. Поскольку «призрачные» призывы к действию по-прежнему популярны, неоновый эффект как нельзя лучше подходит.

Есть два отличных фрагмента кода, которые стоит попробовать: один сделан Симоной, а другой — Элвином ван ден Хейзелом. Оба они включают в себя простую, но элегантную и утонченную неоновую кнопку. В то время как первый немного мрачноват из-за приглушенной окраски, второй, безусловно, сразу бросается в глаза своим ярким синим оттенком и эффектом свечения. Все сделано на чистом HTML и CSS.

Неоновые диалоговые окна Хьюго ДарбиБрауна

Вы также можете применить неоновый стиль к диалоговым окнам. Просто взгляните на неоновые диалоговые окна Хьюго ДарбиБрауна. Автор включил четыре обычных диалоговых панели. Они выглядят смело и привлекательно, но при этом не кричат ​​по всем фронтам. Неоновый эффект придал банальным элементам пользовательского интерфейса приятную изюминку.

неоновая гексарешетка Матея Копота / Neon Hex Particles — Recreation Бретта / на время Джерарда Феррандеса

Хотя мы рассматриваем неоновые стили как эффект, который можно применять к отдельным деталям веб-сайта (например, к кнопкам, типографике или загрузчику), он также может легко стать отличным фоном. Рассмотрим неоновую гексасетку Матея Копота, Neon Hex Particles — Recreation Бретта и некоторое время Джерарда Феррандеса.

Matei Copot предлагает онлайн-посетителям фантастический неоновый фон в стиле сот, где каждая ячейка имеет свою продолжительность жизни. Цвет меняется с фиолетового на бирюзовый и выглядит вдохновляюще.

В концепции Бретта есть нотка таинственности. Он также основан на форме шестиугольника, но на этот раз вы также можете увидеть анимацию раскрытия. Узор появляется в центре и разрастается в стороны. Есть панель управления, где можно поиграться с настройками.

В отличие от двух предыдущих примеров, проект Жерара Феррандеса представляет собой современный взгляд на неоновый стиль. Здесь вы найдете тысячи мелких частиц, образующих прямоугольник. Используйте курсор мыши, чтобы потревожить плоскую поверхность и поднять волну, отмеченную золотым неоновым оттенком.

Светящиеся примеры

Хотя неоновый эффект не делает ничего необычного, он по-прежнему является одной из тех вещей, которые сразу бросаются в глаза. Это отличный инструмент, чтобы сделать детали веб-сайта более заметными.

Его можно использовать, чтобы установить фокус или просто немного оживить обстановку яркой харизмой флуоресцентной природы. Он отлично сочетается с типографикой, кнопками и даже фоном.

Да, у него есть один большой недостаток — он раскрывает свою красоту и потенциал только в темноте. Итак, если вы используете более легкий пользовательский интерфейс, то это не лучший выбор. Но если вы задумали темный дизайн, то неоновый эффект может стать идеальным инструментом для того, чтобы произвести впечатление на ваших посетителей.