10가지 놀라운 CSS 및 HTML 레트로 유형 효과

Hipstamatic, Spotify, 그리고 지금은 Adidas: 우리 사회는 옛날 방식과 방식에 대한 엄청난 열망을 갖고 있는 것 같습니다. 어쩌면 우리 시장이 첨단 기술과 혁신으로 가득 차서 지루해지기 시작할 수도 있습니다. 아니면 모든 것이 쉽고 단순하며 장미빛으로 보였던 옛날에 대한 진부한 향수일 수도 있습니다. 최근 과거의 모든 것에 대한 현재 집착이 분명합니다. 어디에서나 볼 수 있으며 웹 디자인 영역도 예외는 아닙니다.

사실, 복고풍 스타일은 때때로 웹에서 나타납니다. 파스텔 레트로 컬러 팔레트, 이중톤 효과, 대담한 과도하게 단순화된 기하학적 프린트, 아르데코 일러스트레이션, 거칠고 시끄러운 효과, 폴라로이드 같은 이미지, 타블로이드에서 영감을 받은 레이아웃, 구식 게임에서 가져온 풍경, 그리고 물론 오래된- 시의적절한 타이포그래피.

말하자면, 타이포그래피는 프로젝트에 활기찬 복고풍 느낌을 불어넣을 때 가장 인기 있는 옵션 중 하나입니다. 섬세하고 맛있습니다. 그리고 가장 중요한 것은 프로젝트를 압도하거나 과부하가 걸리지 않는다는 것입니다. 시선을 사로잡아 적절한 분위기를 연출해주는 완벽한 마무리 터치다.

또한 CSS/JS 및 SVG의 사랑받는 트리오를 사용하여 80년대 또는 90년대의 효과를 빠르게 재현할 수 있습니다. 효과를 단어에 적용하고 몇 초 안에 원하는 결과를 얻으십시오. 또한 사진 편집이나 Photoshop 또는 Sketch와 같은 디자인 관련 프로그램을 사용하여 변경 작업을 수행할 필요가 없습니다. 심플하고 고급스럽죠?

작업을 완료하는 이 방법을 높이 평가하는 사람이라면 놀라운 복고풍 타이포그래피 효과가 있는 10개의 코드 스니펫을 수집했습니다. 한 번 보자:

나라를 떠났다

Gabrielle Wee의 뛰어난 코드 조각으로 컬렉션을 시작하지 않을 수 없었습니다. 그녀의 프로젝트는 Left the Country라고 불리며 주로 Duffer Brothers의 공포, "Stranger Things"에서 영감을 받았습니다. 많은 디자이너와 개발자가 이를 재현했습니다. Dribbble과 Codepen은 쇼의 인트로에 대한 전문적인 해석으로 가득 차 있습니다. 데이터로 로고를 다시 만들고 이미지를 다운로드할 수 있는 Nelson Cash에서 개발한 생성기도 있습니다. 그러나 모든 정적인 것을 피하고 싶다면 순수한 HTML 및 SCSS 솔루션인 Wee의 코드 스니펫을 사용해 보십시오.

공실 없음 404

Riley Shaw의 No Vacancy 404는 Gabrielle Wee의 이전 작업과 매우 유사합니다. 그 뿌리는 더 큰 사실감을 위해 빛나는 터치와 깜박임 효과로 강화된 놀라운 라인 아트에 있습니다. 그것은 우리에게 지난 세기 중반에 미국에서 인기를 얻었던 모든 밝은 네온사인을 생각나게 합니다. 그러나 그들은 Riley Shaw의 걸작만큼 우아하고 세련되게 보이지는 않았습니다. 솔루션은 우아함, 세련미 및 빈티지 매력의 공생입니다.

빈티지 네온 사인

빛나는 효과와 미국식 분위기가 더 필요하십니까? 그런 다음 Kyle Lavery의 빈티지 네온 사인에주의를 기울여야합니다. 화려한 간판으로 가득했던 60년대 광고에서 튀어나온 듯한 느낌입니다. 다양한 직경의 튜브, 놀라운 발광 효과, 논란의 여지가 있는 색상 팔레트 및 웅장한 서체의 스마트한 조합이 트릭을 수행하여 뛰어난 코드 기반 걸작을 만듭니다.

분열: 스페이스 인베이더

80년대로 돌아가 이 시기를 염두에 두고 만든 타이포그래피 효과를 특징으로 하는 코드 조각을 살펴보겠습니다. 무엇보다도 80년대와 90년대는 비디오 게임에 관한 것이었습니다. 우리의 어린 시절은 너무 사랑 스러웠습니다. 그리고 Martin Pitt는 우리에게 그 점을 상기시켜준 사람 중 한 명입니다. His Splitting: Space Invaders는 우리를 십대 시절로 되돌려줍니다. 이러한 깨달음은 긍정적인 분위기와 장난기가 매력적입니다. 귀엽고 몽환적으로 보입니다. CSS로 쉽게 조작할 수 있는 Splitting 라이브러리의 도움으로 만들어졌습니다.

레트로 타이포그래피로 놀기

가정용 비디오 게임 콘솔인 Atari에서 아케이드 게임이 없는 90년대는 없습니다. Geek World에서 80년대와 90년대의 동의어일 뿐입니다. 그리고 Max Kohler는 그것을 완벽하게 잘 알고 있습니다. 레트로 타이포그래피 전용 코드펜에는 아타리 로고가 능숙하게 재현되어 있습니다. 또한 레터링에 즐거운 복고풍 느낌을 주는 4가지 효과를 더 찾을 수 있습니다.

새로운 복고풍 텍스트 / 80년대 타이포그래피 / 404 SVG

우리 컬렉션에는 TV와 관련된 달콤한 추억을 떠올리게 하는 몇 가지 환상적인 텍스트 효과가 있습니다. 예를 들어 Vladimir Jovanovic의 New retro text, David Parker의 80년대 Typography, Marcos Melado의 404 SVG가 있습니다. 처음 두 프로젝트는 대담한 타이포그래피, 광택 있는 표면, 네온 스타일 및 과감한 색상을 사용하여 특정 VHS 레트로 인트로 분위기를 연출하는 반면, 두 번째 프로젝트는 그 시대 MTV의 뮤직 비디오 클립처럼 약간 소박하고 평범하며 조잡한 느낌입니다.

빈티지 서체 / 멋진 빈티지 제목

이것은 몇 가지 전통적인 솔루션 없이는 레트로 타이포그래피 효과의 완전한 모음이 아닐 것입니다. Thibault Jan Beyer의 Vintage Typeface와 Kevin Nagata의 Awesome Vintage Title이라는 두 가지 환상적인 코드 조각이 있습니다. 둘 다 우리가 상상하는 것처럼 전통적인 빈티지 서체를 보여줍니다. 점점 더 길어지는 글자 형태, 미묘한 아르데코 터치, 그리고 물론 예술 작품의 심장이자 영혼인 그림자가 있는 초박형입니다. Thibault Jan Beyer의 프로젝트는 고전적이고 장엄해 보이지만; Kevin Nagata의 프로젝트는 약간 장난기 있는 톤으로 현대적으로 보입니다.

시간을 거슬러

초현대적이고 세련되고 고급스러운 모든 것에 지겹다면 현재를 버리고 과거에서 영감을 찾아야 할 때입니다. 우리를 믿으십시오. 항상 구멍에 에이스가 있습니다. 하루를 구하는 데 실패한 적이 한 번도 없습니다.

프로젝트를 군중에서 돋보이게 하는 디자이너 트렌드와 솔루션을 제공합니다. 레트로 타이포그래피 효과가 그 완벽한 예입니다. 자연스레 시선을 사로잡는 과거의 유쾌하고 유쾌한 폭발들이 마치 신선한 공기를 들이마시는 것 같은 느낌을 준다.