레트로 CSS 텍스트 효과 알아보기

lifestyler

CSS는 올바르게 사용하면 웹 사이트의 시각적 경험을 향상시킬 수 있는 도구 세트를 제공합니다. 이 튜토리얼에서는 순수한 CSS를 사용하여 레트로 텍스트 효과를 디자인하는 간단한 방법을 검토합니다. 이 접근법은 그렇게 복잡하지는 않지만 시각적으로 매력적인 결과를 가져오고 추가 사용자 정의의 기초 역할을 합니다.

HTML 설정

스타일을 설정할 텍스트가 포함된 마크업으로 시작합니다.

<div class="retro-text"> 1stWebDesigner</div>

div 클래스 .retro-text 이것은 CSS 스타일의 후크입니다.

CSS로 레트로 스타일 디자인

그런 다음 CSS 파일로 이동하여 레트로 텍스트 효과를 만듭니다.

@import url('

body
    background: #6868AC; /* Retro background color */


.retro-text
    font-family: 'Lobster Two', serif; /* Stylish, retro font */
    font-size: 10vw; /* Responsive font size */
    position: relative; /* Enables use of z-index */
    color: #F9f1cc; /* Primary color of the text */
    text-shadow: -2px 2px 0 #FFB650, /* Orange shadow */
                 -4px 4px 0 #FF80BF, /* Pink shadow */
                 -6px 6px 0 #6868AC; /* Dark blue shadow */
    transform: skewX(-10deg); /* Skew the text on the X-axis */
    transition: all 0.5s ease; /* Smooth transition for hover effects */
    z-index: 2; /* Ensures text is layered above any potential background or border */


.retro-text:hover
    color: #FFFFFF; /* Brighter color on hover */
    font-size: 15vw; /* Slightly larger text on hover */
    text-shadow: -2px 2px 0 #FFC162, /* Brighter orange shadow on hover */
                 -4px 4px 0 #FF92D0, /* Brighter pink shadow on hover */
                 -6px 6px 0 #8888D3; /* Brighter blue shadow on hover */

CSS 설정을 설명하면 다음과 같습니다.

  • font-family: 'Lobster Two', serif;: 레트로 세련된 글꼴 “Lobster Two”를 사용하고 있습니다.
  • font-size: 10vw;: 뷰포트 너비에 맞는 반응형 글꼴 크기를 설정합니다.
  • position: relative;: z-index 속성을 사용하려면 상대 위치 결정이 필요합니다.
  • color: #F9f1cc;: 텍스트의 기본 색상을 결정합니다. 여기에서는 밝은 크림 색상의 #F9f1cc를 사용합니다.
  • text-shadow: -2px 2px 0 #FFB650, -4px 4px 0 #FF80BF, -6px 6px 0 #6868AC;: 3층 텍스트 그림자(오렌지, 핑크, 다크 블루)가 추가되어 레트로 분위기를 높이는 3D 효과를 만들어냅니다.
  • transform: skewX(-10deg);: 텍스트가 X축에서 비스듬하게 되어 동적 터치가 추가됩니다.
  • transition: all 0.5s ease;: 호버 효과의 부드러운 트랜지션.
  • z-index: 2;: z-index 가 2 의 경우, 텍스트는 항상 잠재적인 배경 또는 경계선 위에 겹쳐집니다.
  • :hover: 호버 상태에서는 밝은 색, 약간 큰 텍스트 크기 및 밝은 그림자가 포함됩니다.

 

최종 아이디어

보시다시피 CSS는 디자인을 강화할 수있는 많은 기회를 제공합니다. 레트로 텍스트 효과를 출발점으로 사용하면 텍스트의 그림자를 변경하고, 불투명도를 조정하고, 그라데이션 배경을 통합하여 레트로 분위기를 강화하는 등 추가 조정을 시도할 수 있습니다.

그러나 텍스트의 기능을 기억하는 것이 중요합니다. 목표는 가독성을 유지하면서 시각적으로 매력적인 사이트를 만드는 것입니다. 이것은 다음과 같은 뷰포트 단위를 사용할 때 특히 중요합니다. vw 글꼴 크기는 이 예제에서 사용했습니다. 이러한 단위를 사용하면 텍스트를 뷰포트 크기에 맞게 조정할 수 있으므로 반응형 디자인이 보장됩니다.

그러나 주의는 필요합니다. 제목과 같은 일부 컨텍스트에서는 vw 단위가 다르면 텍스트가 불균형하게 크거나 작게 나타날 수 있습니다. 이를 방지하려면 뷰포트와 고정 장치를 함께 사용하는 것이 좋습니다. em 또는 rem또는 미디어 쿼리에서 최대/최소 글꼴 크기를 설정합니다. 항상 기억하십시오. 디자인은 중요하지만 사용자가 편안하게 콘텐츠를 읽고 이해할 수 있는 능력을 결코 손상시키지 않아야 합니다.

따라서 새로운 요소를 도입하든 기존 요소를 미세 조정하든 고급 기술을 사용하든, 수행하는 모든 단계가 디자인의 욕구를 반영하는 독특한 스타일을 만들 수 있습니다. 도움이됩니다.

일부 포스팅은 쿠팡 파트너스와 같은 제휴 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

Leave a Comment