CSS 네온사인 효과내기

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

 

핵심 소스

네온사인 효과를 내는 핵심소스입니다. 원하는 html element에 "<div class="neon">" 이와 같이 스타일을 적용하시면 됩니다.

.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>

 

CSS 햄버거 메뉴에 애니매이션 효과 넣기