Как создать сайт или блог в 2020 году - бесплатное и простое руководство по созданию сайта

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

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

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

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

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

Если вы тот, кто ценит этот способ ведения дел, мы собрали 10 фрагментов кода с невероятными ретро-типографскими эффектами. Посмотрим:

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

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

Без вакансии 404

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

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

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

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

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

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

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

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

В нашей коллекции есть несколько фантастических текстовых эффектов, напоминающих приятные воспоминания о телевидении. Например, «Новый ретро-текст» Владимира Йовановича, «Типография Дэвида Паркера 80-х годов» и «404 SVG» Маркоса Мелладо. В то время как первые два проекта используют жирную надпись, блестящую поверхность, неоновые стили и резкие цвета для определенной ретро-VHS-вводной атмосферы, второй выглядит немного простовато, обыденно и необработанно, как видеоклипы. мюзиклы на MTV того периода.

Винтажная типография / потрясающее винтажное название

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

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

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

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