프로그래밍/CSS

CSS 네온사인 효과내기

꾸션 2022. 7. 18. 20:46
반응형

CSS 스타일 시트를 이용한 네온사인(Neon sign)효과를 내는 소스입니다.

 

핵심 소스

.neon {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080, 0 0 55px #ff0080, 0 0 75px #ff0080;
}

 

 

안녕하세요, 꾸션입니다.

네온사인 효과 예제

 

예제 소스

css

.neon {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080, 0 0 55px #ff0080, 0 0 75px #ff0080;
}

html

<div style="background-color: #000; height: 200px; width: 100%; display: table; text-align: center">
  <h1 class="neon" style="display: table-cell; vertical-align: middle;font-weight: bold;">안녕하세요, 꾸션입니다.</h1>
</div>
반응형