HTML과 CSS를 사용하여 네온 텍스트 디스플레이 만들기

요즘에는 웹 페이지에 네온 텍스트를 더 매력적으로 만드는 것이 트렌드가 되었습니다. 웹 페이지에 네온 텍스트를 만들어 웹 페이지에 포함된 중요한 정보에 사용자의 주의를 집중시키는 눈길을 끄는 효과를 만들 수 있습니다.

로고, 헤드라인, 광고 등이 포함된 네온 텍스트를 사용하여 강조할 수 있습니다. 이 튜토리얼에서는 text-shadow CSS 속성 값을 사용자 정의하여 네온 텍스트를 만듭니다.

문법

사용자는 아래 구문에 따라 HTML 및 CSS를 사용하여 네온 텍스트를 만들 수 있습니다.

으아악

위 구문에서 "text-shadow" CSS 속성을 사용하여 글로우 효과를 추가했습니다. 수평 오프셋을 첫 번째 값으로, 수직 오프셋을 두 번째 값으로, 흐림 반경을 세 번째 값으로, 색상을 네 번째 값으로 사용합니다.

수직 및 수평 오프셋을 항상 0으로 설정해야 합니다. 네온 효과를 생성하려면 text-shadow CSS 속성에 대해 서로 다른 색상과 흐림 반경을 가진 여러 값을 사용해야 합니다.

예시 1 (기본 네온 텍스트)

아래 예에서는 "text-shadow" CSS 속성을 사용하여 텍스트에 대한 기본 네온 효과를 만들었습니다. 네온 효과를 생성하기 위해 테두리 반경과 색상이 다른 여러 값을 사용합니다.

출력에서 사용자는 네온 효과로 텍스트를 관찰할 수 있습니다.

으아악

예 2(레인보우 네온 텍스트)

아래 예에서는 텍스트에 무지개 네온 효과를 만들었습니다. 여기서는 div 요소 안에 텍스트를 추가했습니다.

CSS에서 "배경 이미지" CSS 속성을 사용하여 선형 그래디언트를 배경으로 추가합니다. 45도 각도에서 4가지 색상의 선형 그래디언트를 적용했습니다. 또한 "-webkit-Background-clip" CSS 속성을 사용하여 배경 이미지를 텍스트 모양으로 자릅니다.

또한 "-webkit-text-fill-color" CSS 속성을 사용하여 텍스트를 투명한 색상으로 채웁니다. 그러면 배경과 같은 색으로 채워지게 됩니다. 또한 "rainbow-keyframe" 키프레임과 함께 애니메이션 CSS 속성을 사용했습니다. 키프레임에서 색조 회전 양을 변경하여 배경의 색조를 회전합니다.

출력에서 사용자는 텍스트의 무지개 효과를 관찰할 수 있습니다.

으아악

예 3(깜박이는 네온 텍스트)

아래 예에서는 깜박이는 네온 텍스트를 만들었습니다. 여기서는 "text-shadow" CSS 속성을 사용하여 텍스트에 네온 효과를 추가합니다. 또한 "animation" 속성을 사용하여 깜박임 애니메이션을 추가합니다. "blink" 키프레임에서는 "text-shadow" 속성의 값을 변경합니다.

출력에서 글로우 효과로 깜박이는 텍스트를 볼 수 있습니다.

으아악

예 4(그라디언트 네온 텍스트)

아래 예에서는 텍스트에 그라디언트를 추가합니다. "배경 이미지" 속성을 사용하여 텍스트에 그라데이션을 적용합니다.

출력에서 사용자는 그라데이션으로 텍스트 색상을 관찰할 수 있습니다. 또한 사용자는 Linear-gradient() 함수 인수에 다양한 색상 값을 전달하여 그라데이션 색상을 변경할 수 있습니다.

으아악

사용자는 HTML과 CSS만 사용하여 네온 텍스트를 만드는 방법을 배웠습니다. 무지개 효과, 깜박이는 효과 등의 애니메이션을 사용하여 기본 네온 텍스트에서 고급 네온 텍스트를 만드는 방법을 배웠습니다.

위 내용은 HTML과 CSS를 사용하여 네온 텍스트 디스플레이 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!