본문 바로가기
프로그래밍/CSS

CSS 네온사인 효과내기

by 꾸션 2022. 7. 18.

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 햄버거 메뉴에 애니매이션 효과 넣기

흔히 햄버거 메뉴라고 하는 접혔다 펼쳐졌다가 하는 메뉴 버튼입니다. 이 메뉴 버튼에 애니매이션 효과를 주는 방법 입니다. 메뉴가 접혀 있을 때는 햄버거 모양에서 펼쳐지면 X모양으로 자연스

ccusean.tistory.com

 

반응형

댓글