CSS 텍스트 네온사인 만드는 방법

네온 텍스트는 웹 사이트에 독특하고 현대적인 느낌을 더할 수 있는 멋진 기능입니다. 저도 항상 네온사인의 매력에 빠져들었고, CSS를 사용하여 그 효과를 다시 만들어보고 싶었습니다. 그래서 이번에는 네온사인 효과를 텍스트에 추가하는 방법에 대해 몇 가지 유용한 팁을 공유해보고자 합니다. 또한 CSS와 키프레임을 활용하여 다양한 네온사인 효과를 구현하는 방법도 알아보겠습니다.

다음은 우리가 만들 CSS 텍스트 네온사인입니다.

텍스트에 글로우 효과 추가

글로우 효과를 텍스트에 추가해보겠습니다. 이를 위해 CSS의 text-shadow 속성을 사용할 수 있습니다. text-shadow 속성은 여러 그림자를 적용할 수 있는데, 각 그림자는 쉼표로 구분하여 지정합니다.

.neonText {
  color: #fff;
  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa,
    0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa;
}

text-shadow 속성에는 네 개의 값이 필요합니다. 처음 두 값은 각각 그림자의 가로 및 세로 위치를 나타내고, 세 번째 값은 흐림 반경의 크기를 나타냅니다. 마지막 값은 그림자의 색상을 나타냅니다. 흐림 반경 값을 조정하여 글로우 효과의 크기를 조절할 수 있습니다. 또는 다음과 같이 다른 표현 방식을 사용할 수도 있습니다.

또는 다른 방식으로 표현 :

text-shadow: [x-offset] [y-offset] [blur-radius] [color];

다음은 CSS로 얻을 수 있는 것입니다.

이러한 다양한 가치들에 대한 저의 생각은 매우 긍정적입니다. 저는 이러한 효과들이 웹 사이트에 미래적이고 현대적인 느낌을 더해줄 수 있다고 생각합니다. 네온 텍스트는 시선을 사로잡고 사용자들에게 시각적인 매력을 제공하는데 도움이 되며, 웹 디자인에 창의성과 개성을 더해줍니다. 이러한 효과들을 구현하는 방법에 대해 알아보겠습니다. 먼저, 텍스트의 바깥쪽 가장자리에 작은 블러 반경을 가진 흰색 광선 효과를 추가합니다.

.neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, }

마지막 5 개 값은 녹큰 흐림 반경을 가지며 녹색 광선을 형성하는 더 넓은 텍스트 그림자를 추가합니다.

.neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, /* Green glow */ 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; }

이 작업을 수행할 때, 그림자들이 서로 겹쳐질 수 있도록 모든 그림자가 필요합니다. 이로 인해 깊이가 더해져 빛 효과가 더욱 사실적으로 보이게 됩니다. 효과를 달성하기 위해 싱글 대신에 여러 개의 그림자를 사용하는 것이 필요한 이유입니다. 위의 방법을 사용하여 텍스트에 멋진 빛나는 효과를 적용할 수 있습니다. 이를 통해 웹 사이트에 독특하고 매력적인 시각적 요소를 추가할 수 있습니다.

다양한 색상과 색상, 블러 반경 크기를 실험해보세요!다양한 멋진 글로우 효과를 만들 수 있으므로 다양한 변형을 시도해보세요. 한 색상이 다른 색상과 혼합되는 색상을 혼합하고 일치시킬 수도 있습니다.

"깜박임"효과

네온사인에서 한 가지 알아차릴 수 있는 사실은 일부 (특히 오래된 것들)이 깜박이는 경향을 가진다는 것입니다. 빛이 꺼지고 켜지는 효과를 CSS 애니메이션으로 구현할 수도 있습니다! 이를 위해 다음과 같이 깜빡이는 빠르게 빛을 켜고 끄는 애니메이션인 @keyframes flicker을 만들어보겠습니다.

@keyframes flicker {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa,
      0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa;
  }
  20%,
  24%,
  55% {
    text-shadow: none;
  }
}

위의 코드는 @keyframes로 묶인 애니메이션인 flicker을 생성합니다. flicker 타임라인에서는 특정 포인트에서는 그림자를 적용하고, 다른 포인트에서는 그림자를 완전히 제거합니다. 이전에 가지고 있던 text-shadow의 속성과 값을 그대로 가져와서 사용하였습니다.

남은 일은 깜빡이는 효과를 원하는 텍스트에 애니메이션을 적용하는 것입니다. 이 예시에서는 <h1> 요소에만 적용하겠습니다. 전체 텍스트가 깜빡이도록 하고 싶다면, 기술적으로는 .neonText 클래스의 text-shadow 값을 제거하고 애니메이션을 추가한 다음, @keyframes 대신에 그림자를 적용하도록 할 수 있습니다.

h1 { animation: flicker 1.5s infinite alternate; }

전체 기호가 깜박이도록 하려면 기술적으로 클래스 의 text-shadow값을 제거 .neonText하고 애니메이션을 추가 한 다음 @keyframes대신 그림자를 적용하도록 할 수 있습니다.

위의 코드는 h1 요소에 flicker 애니메이션을 1.5초간 반복하도록 설정한 것입니다. 이로써 전체 텍스트가 깜빡이는 효과를 가지게 됩니다.

.neonText {
  animation: flicker 1.5s infinite alternate;
  color: #fff;
}

h1 {
  font-size: 4.2rem;    
}

/* Flickering animation */
@keyframes flicker {
    
  0%, 18%, 22%, 25%, 53%, 57%, 100% {

      text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  
  }
  
  20%, 24%, 55% {        
      text-shadow: none;
  }    
}


/* Additional styling */
  
h2 {
 font-size: 1.8rem;
}
.container {
  margin-top: 20vh;
}

body {
  font-size: 18px;
  font-family: "Helvetica Neue", sans-serif;
  background-color: #010a01;
}  

h1, h2 {
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}

<div class="container">
    <h1 class="neonText">
          404
    </h1>
    <h2 class="neonText">Page Not Found</h2> 

 </div>

네온 텍스트에는 다양한 효과가 있으며 실제로 사용할 수 있는 다른 효과도 있습니다. 이 기사에서는 맥동하는 애니메이션과 미묘한 깜박임 효과를 자세히 알아보겠습니다!

404

Page Not Found

이러한 효과와 다른 효과를 살펴보겠습니다!

펄싱 글로우

먼저, "펄싱 글로우" 효과입니다. 이전 예시와 마찬가지로 @keyframes를 사용하여 애니메이션의 시작과 끝에서 블러 반경의 크기를 지정합니다. 애니메이션이 끝날 때 블러 반경을 가장 작게 만들어 맥동 효과를 연출합니다.

@keyframes pulsate {
100% {
/* 큰 블러 반경 /
text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa;
}
0% {
/ 작은 블러 반경 */
text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 10px #0fa, 0 0 45px #0fa, 0 0 55px #0fa, 0 0 70px #0fa, 0 0 80px #0fa;
}
}

다음으로, 애니메이션을 일부 요소에 추가합니다. 여기서는 <h1> 요소에 적용하겠습니다.

h1 { animation: pulsate 2.5s infinite alternate; }

위의 코드는 pulsate 애니메이션을 2.5초 동안 번갈아가며 무한 반복하도록 설정한 것입니다. 이로써 전체 텍스트에 맥동 효과가 적용됩니다.

미묘한 깜박임

또 다른 효과는 "미묘한 깜박임"입니다. 이를 위해 0% 키 프레임에서 블러 반경의 크기를 약간 줄이면 됩니다.

@keyframes pulsate { 100% { /* Larger blur radius */ text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #f09, 0 0 80px #f09, 0 0 90px #f09, 0 0 100px #f09, 0 0 150px #f09; } 0% { /* A slightly smaller blur radius */ text-shadow: 0 0 4px #fff, 0 0 10px #fff, 0 0 18px #fff, 0 0 38px #f09, 0 0 73px #f09, 0 0 80px #f09, 0 0 94px #f09, 0 0 140px #f09; } }

미묘한 깜박임은 플리커 링이 미묘하게 작용하고 블러 반경의 감소가 크지 않으므로 플리커 링이 더 자주 발생하도록 애니메이션의 속도를 빠르게 만들어야 합니다. 이를 위해 애니메이션의 지속 시간을 줄여 0.11초로 설정합니다.

h1 { animation: pulsate 0.11s ease-in-out infinite alternate; }

배경 이미지 사용

추가로 배경 이미지를 사용하는 방법도 있습니다. 네온사인이 벽에 걸려있다면 매우 멋질 것입니다. 배경 이미지를 가져와 텍스트 주위에 벽돌 텍스처와 같은 효과를 적용할 수 있습니다.

body { background-image: url(wall.jpg); }

테두리 추가

마지막으로 테두리를 추가할 수도 있습니다. 텍스트를 감싸는 요소에 원형이나 직사각형 테두리를 만들어 실제 사인처럼 보이게 할 수 있습니다. 테두리에 그림자를 추가하면 텍스트와 동일한 네온 효과를 줄 수 있습니다. 예를 들어, <h1> 요소를 사용하여 텍스트 컨테이너로 작업한다고 가정해봅시다. 다음과 같이 테두리를 얻습니다.

h1 { border: 0.2rem solid #fff; padding: 0.4em; }

위의 코드는 제목 주위에 흰색 테두리를 가진 단색 테두리를 생성하고 텍스트에 공간을 제공하기 위해 약간의 패딩을 추가한 것입니다. 이렇게 함으로써 더욱 사실적인 네온 효과를 얻을 수 있습니다.

h1 { border: 0.2rem solid #fff; border-radius: 2rem; padding: 0.4em; }

마지막 조각은 빛입니다! 자, text-shadow여기의 경계선에서는 작동하지 않을 것이지만, 그것이 box-shadow속성이하기 위해 설계된 것이기 때문에 괜찮습니다.구문은 매우 유사하므로 우리가 가진 것을 정확히 가져 text-shadow오고 값을 약간 조정할 수도 있습니다.

h1 { border: 0.2rem solid #fff; border-radius: 2rem; padding: 0.4em; box-shadow: 0 0 .2rem #fff, 0 0 .2rem #fff, 0 0 2rem #bc13fe, 0 0 0.8rem #bc13fe, 0 0 2.8rem #bc13fe, inset 0 0 1.3rem #bc13fe; }

그 inset키워드 가 보이십니까? 그것은 text-shadow할 수 없는 일이지만 테두리에 추가하면 box-shadow실제적인 깊이를 위해 테두리의 양쪽에서 빛을 얻을 수 있습니다.

접근성은 어떻습니까?

만약 사용자가 움직임 감소를 선호한다면, prefers-reduced-motion 미디어 쿼리를 사용하여 그들의 선호를 수용해야 합니다. 이를 통해 움직임 감소를 선호하는 사용자들이 텍스트에 더 쉽게 접근할 수 있도록 애니메이션 효과를 제거할 수 있습니다.

예를 들어, 위에서 언급한 깜박이는 애니메이션을 수정하여 prefers-reduced-motion이 활성화된 사용자가 애니메이션을 보지 못하도록 할 수 있습니다. 깜박이는 효과를 <h1> 요소에만 적용했으므로, 이 요소의 애니메이션을 끄는 것입니다.

@media screen and (prefers-reduced-motion) { h1 { animation: none; } }

사용자의 선호도를 충족시키는 것은 매우 중요하며, prefers-reduced-motion 미디어 쿼리를 사용함으로써 움직임 감소를 선호하는 사용자들이 효과에 더 쉽게 접근할 수 있도록 할 수 있습니다.

결론

저희가 보여드린 것이 다음 프로젝트에서 멋진 네온 텍스트를 만드는 방법에 도움이 되기를 바랍니다! 여러 가지 글꼴, 흐림 반경 크기 및 색상을 실험하고 다른 애니메이션도 시도해 보는 것을 잊지 마십시오. 가능성의 세계가 펼쳐집니다. 만약 공유하고 싶은 멋진 그림자 효과가 있다면, 언제든지 댓글로 공유해 주세요. 읽어 주셔서 감사합니다!