10 удивительных эффектов CSS и HTML в стиле ретро

Hipstamatic, Spotify, а теперь и Adidas: кажется, что наше общество испытывает сильную тягу к старым временам и старым путям. Может быть, наш рынок настолько насыщен всем высокотехнологичным и инновационным, что мы начинаем скучать. А может быть, это просто банальная ностальгия по старым временам, когда все казалось легким, простым и радужным. Очевидна нынешняя одержимость всем из недавнего прошлого. Его можно увидеть везде, и сфера веб-дизайна не исключение.

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

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

Более того, вы можете быстро воспроизводить эффекты 80-х или 90-х годов с помощью любимого трио CSS/JS и SVG. Просто примените эффект к любому слову и получите желаемый результат за считанные секунды. И вам не нужно возиться с редактированием фотографий или программами, связанными с дизайном, такими как Photoshop или Sketch, чтобы внести изменения. Просто и элегантно, не правда ли?

Если вы цените такой способ достижения цели, мы собрали 10 фрагментов кода с потрясающими эффектами ретро-типографики. Давайте взглянем:

Покинул страну

Мы не могли не начать нашу коллекцию с этого выдающегося фрагмента кода от Габриэль Ви. Ее проект называется Left the Country и был вдохновлен хоррором братьев Даффер «Очень странные дела». Многие дизайнеры и разработчики воспроизвели его. Dribbble и Codepen изобилуют профессиональными взглядами на вступление шоу. Существует даже генератор, разработанный Нельсоном Кэшем, который позволяет вам воссоздать логотип с вашими данными и загрузить изображение. Но если вы хотите избежать статичности, попробуйте фрагмент кода Wee, который представляет собой чистое решение HTML и SCSS.

Нет вакансий 404

No Vacancy 404 Райли Шоу очень похожа на предыдущую работу Габриэль Ви. Его корни лежат в чудесном линейном искусстве, которое усилено светящимся прикосновением и эффектом мерцания для большего реализма. Он напоминает нам обо всех тех ярких неоновых вывесках, которые пользовались все большей популярностью в середине прошлого века в Америке. Хотя, возможно, выглядели они не так изящно и утонченно, как шедевр Райли Шоу. Решение представляет собой симбиоз элегантности, изысканности и винтажной привлекательности.

Винтажная неоновая вывеска

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

Разделение: Космические захватчики

Давайте вернемся к 80-м годам и фрагментам кода с типографскими эффектами, сделанными с учетом этого периода. Прежде всего, 80-е и 90-е были посвящены видеоиграм. Наше детство было таким очаровательным. И Мартин Питт — один из тех, кто сумел нам об этом напомнить. Его Splitting: Space Invaders возвращает нас в подростковый период. Это осознание очаровывает положительными эмоциями и игривостью. Выглядит мило и мечтательно. Он был создан с помощью библиотеки Splitting, которая упрощает манипуляции с CSS.

Игра с ретро-типографикой

Не бывает 90-х без аркадных игр, в которые играют на домашней игровой приставке Atari. Это просто синоним 80-х и 90-х в мире гиков. И Макс Колер прекрасно это знает. В его коде, посвященном ретро-типографике, искусно воспроизведен логотип Atari. Вы также найдете еще четыре эффекта, которые придают надписи приятный ретро-стиль.

Новый ретро-текст / Типографика 80-х / 404 SVG

В нашей коллекции есть несколько фантастических текстовых эффектов, которые вызывают приятные воспоминания, связанные с телевидением. Например, New retro text Владимира Йовановича, 80s Typography Дэвида Паркера и 404 SVG Маркоса Мелладо. В то время как в первых двух проектах используется смелая типографика, глянцевая поверхность, неоновая стилизация и резкое окрашивание для определенной атмосферы ретро-интро VHS, второй выглядит немного простоватым, обыденным и грубым — прямо как музыкальные видеоклипы на MTV того периода.

Винтажный шрифт / Потрясающее винтажное название

Это не было бы полной коллекцией эффектов ретро-типографики без пары традиционных решений. И у нас есть два фантастических фрагмента кода: Vintage Typeface от Thibault Jan Beyer и Awesome Vintage Title от Kevin Nagata. Оба они представляют собой традиционный винтажный шрифт, как мы привыкли его себе представлять: ультратонкий со все более удлиняющимися формами букв, тонким оттенком ар-деко и, конечно же, тенью, которая является сердцем и душой произведения искусства. В то время как проект Тибо Яна Бейера выглядит классически и величественно; проект Кевина Нагаты выглядит немного современно с неким игривым подтекстом.

Назад во времени

Если вам надоело все ультрасовременное, утонченное и дорогое, то пришло время отказаться от настоящего и искать вдохновение в прошлом. Поверьте, у него всегда есть туз в рукаве. Ни разу не удается спасти положение.

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