10 niesamowitych efektów CSS i HTML Retro Type

Hipstamatic, Spotify, a teraz Adidas: wydaje się, że nasze społeczeństwo ma ogromne pragnienie starych czasów i starych sposobów. Może nasz rynek jest tak nasycony wszystkim, co zaawansowane technologicznie i innowacyjne, że zaczynamy się nudzić. A może to po prostu banalna nostalgia za dawnymi czasami, kiedy wszystko wydawało się proste, proste i różowe. Obecna obsesja na punkcie wszystkiego z niedawnej przeszłości jest oczywista. Widać to wszędzie, a sfera projektowania stron internetowych nie jest wyjątkiem.

W rzeczywistości styl retro pojawia się od czasu do czasu w sieci. Pokazuje poprzez pastelowe palety kolorów retro, efekty bichromii, odważne, uproszczone nadruki geometryczne, ilustracje w stylu art-deco, ziarniste i hałaśliwe efekty, obrazy przypominające polaroidy, układy inspirowane tabloidami, scenerię zaczerpniętą z oldschoolowych gier i oczywiście old- czasowa typografia.

A skoro już o tym mowa, typografia jest jedną z najpopularniejszych opcji, jeśli chodzi o zaszczepienie projektu w stylu retro. Jest subtelny i gustowny. A co najważniejsze, nie przytłacza ani nie przeciąża projektu. To po prostu perfekcyjne wykończenie, które przykuwa wzrok i tworzy odpowiednią atmosferę.

Co więcej, możesz szybko odtworzyć efekty z lat 80. lub 90. za pomocą uwielbianego trio CSS/JS i SVG. Po prostu zastosuj efekt do dowolnego słowa i uzyskaj pożądany efekt w kilka sekund. I nie musisz zadzierać z programami do edycji zdjęć lub projektowania, takimi jak Photoshop lub Sketch, aby wprowadzać zmiany. Proste i eleganckie, prawda?

Jeśli jesteś osobą, która docenia ten sposób wykonywania zadań, zebraliśmy 10 fragmentów kodu z niesamowitymi efektami typografii retro. Spójrzmy:

Opuścił kraj

Nie mogliśmy pomóc, ale rozpoczęliśmy naszą kolekcję od tego wyjątkowego fragmentu kodu od Gabrielle Wee. Jej projekt nosi tytuł Left the Country i został zainspirowany przede wszystkim horrorem braci Duffer, „Stranger Things”. Odtworzyło go wielu projektantów i programistów. Dribbble i Codepen roją się od profesjonalnych ujęć wstępu do serialu. Istnieje nawet generator opracowany przez Nelsona Casha, który pozwala odtworzyć logo z Twoimi danymi i pobrać obraz. Ale jeśli chcesz uniknąć statyki, wypróbuj fragment kodu Wee, który jest czystym rozwiązaniem HTML i SCSS.

Brak wakatów 404

No Vacancy 404 Riley Shaw jest bardzo podobna do poprzedniej pracy Gabrielle Wee. Jej korzenie leżą w cudownej grafice, która jest wzmocniona świecącym dotykiem i efektem mrugania, aby uzyskać większy realizm. Przypomina nam te wszystkie jasne neony, które były coraz bardziej popularne w połowie ubiegłego wieku w Ameryce. Choć może nie wyglądały tak elegancko i wytwornie jak arcydzieło Rileya Shawa. Rozwiązaniem jest symbioza elegancji, wyrafinowania i stylu vintage.

Vintage neonowy znak

Potrzebujesz więcej świecących efektów i amerykańskiego klimatu? W takim razie zwróć uwagę na Vintage Neon Sign autorstwa Kyle'a Lavery'ego. Po prostu wydaje się, że wyszedł z reklam z lat 60-tych, które były przepełnione świetlnymi znakami. Inteligentna kombinacja rurek o różnych średnicach, wspaniały efekt świecenia, kontrowersyjna paleta kolorów i wspaniały krój pisma załatwiają sprawę, czego wynikiem jest wybitne arcydzieło oparte na kodach.

Podział: Space Invaders

Wróćmy do lat 80. i fragmentów kodu zawierających efekty typograficzne stworzone z myślą o tym okresie. Przede wszystkim lata 80. i 90. były związane z grami wideo. Nasze dzieciństwo było takie urocze. A Martin Pitt jest jednym z tych, którym udało się nam o tym przypomnieć. Jego Splitting: Space Invaders przenosi nas z powrotem do wieku młodzieńczego. Ta realizacja zachwyca pozytywnymi wibracjami i zabawą. Wygląda uroczo i marzycielsko. Został stworzony przy pomocy biblioteki Splitting, która sprawia, że ​​manipulacje za pomocą CSS są łatwe.

Zabawa z retro typografią

Nie ma lat 90. bez gier zręcznościowych, w które gra się w domowej konsoli do gier Atari. To tylko synonim lat 80. i 90. w świecie geeków. A Max Kohler doskonale o tym wie. Jego pisak poświęcony typografii retro zawiera umiejętnie odwzorowane logo Atari. Znajdziesz tu również cztery inne efekty, które nadają literom przyjemny akcent retro.

Nowy tekst retro / Typografia lat 80. / 404 SVG

W naszej kolekcji znajduje się kilka fantastycznych efektów tekstowych, które przywodzą na myśl słodkie wspomnienia związane z telewizją. Na przykład Nowy tekst retro autorstwa Vladimira Jovanovica, Typografia z lat 80. autorstwa Davida Parkera i 404 SVG autorstwa Marcosa Mellado. Podczas gdy pierwsze dwa projekty wykorzystują odważną typografię, błyszczącą powierzchnię, neonową stylizację i drastyczną kolorystykę dla pewnego stylu retro VHS, drugi jest nieco rustykalny, przyziemny i surowy – zupełnie jak teledyski z MTV z tamtego okresu.

Vintage krój pisma / niesamowity tytuł w stylu vintage

Nie byłby to kompletny zbiór efektów typografii retro bez kilku tradycyjnych rozwiązań. Mamy też dwa fantastyczne fragmenty kodu: Vintage Typeface autorstwa Thibaulta Jana Beyera i Awesome Vintage Title autorstwa Kevina Nagaty. Obydwa przedstawiają tradycyjny krój w stylu vintage, dokładnie taki, jaki zwykliśmy sobie wyobrażać: ultracienkie z coraz bardziej wydłużonymi literami, subtelnym akcentem art-deco i oczywiście cieniem, który jest sercem i duszą dzieła sztuki. Podczas gdy projekt Thibault Jana Beyera wygląda klasycznie i majestatycznie; projekt Kevina Nagaty wygląda nieco nowocześnie z pewnym żartobliwym podtekstem.

Powrót w czasie

Jeśli masz dość wszystkiego, co ultranowoczesne, wyrafinowane i high-endowe, to czas porzucić teraźniejszość i poszukać inspiracji w przeszłości. Uwierz nam, zawsze ma asa w dołku. Ani razu nie uratuje dnia.

Oferuje designerskie trendy i rozwiązania, które pozwalają wyróżnić projekt z tłumu. A efekty typograficzne w stylu retro są tego doskonałym przykładem. Są to przyjazne i przyjemne podmuchy z przeszłości, które w naturalny sposób przyciągają uwagę, czując jak powiew świeżego powietrza.