친절한효자손 취미생활

이 효과는 현재 친효스킨의 우측 상단에 위치한 버튼 메뉴에 적용된 CSS 효과입니다. 마우스를 올려보시면 마치 네온사인에 불이 들어온 듯 은은한 불빛이 나를 감쌀 것입니다. 그렇습니다. 이 효과의 핵심 옵션은 바로 text-shadow입니다. 이 CSS 스타일 옵션을 사용해 네온사인 효과를 연출하는 것입니다. 빠르게 알아보겠습니다.

 

예제

See the Pen CSS text-shadow (NeonSign Effect) by rgy0409 (@rgy0409) on CodePen.

 

위의 예시에는 링크 버튼이 두 개 있습니다. 첫번째는 폰트어썸을 사용한 링크고 두번째는 흔하디 흔한 텍스트 링크입니다. 마우스를 올려보시면 두개 모두 네온사인 효과가 적용되고 있음을 알 수 있습니다. 앞서 언급했듯 :hover 했을 때 text-shadow가 적용되도록 CSS에 마크업 되어있다는것을 확인하실 수 있으실겁니다. CSS에서 그림자를 연출하는 방법은 보통 두 가지가 있습니다.

 

text-shadow

box-shadow

 

이렇게 두 가지입니다. 여기에서는 폰트에 그림자를 적용시켜야 하기에 text-shadow를 사용해야 합니다. text-shadow에 대한 자세한 설명을 미리 해둔것이 있으니 아래의 글을 참고해주시기 바랍니다.

 

CSS text-shadow box-shadow 요소 그림자 효과 사용법

 

CSS text-shadow box-shadow 요소 그림자 효과 사용법

CSS3에서 스타일 만으로도 다양한 그림자 효과를 연출할 수 있습니다. 각 요소에 대한 마크업 방법과 결과값을 한번 살펴보겠습니다. See the Pen CSS : text-shadow / box-shadow by rgy0409 (@rgy0409) on CodeP..

rgy0409.tistory.com

 

text-shadow

보통 네온사인 효과는 백그라운드가 어두울 때 사용해야 눈에 확 들어옵니다. 그렇겠죠? 대도시의 수많은 전광판들이 깜깜한 밤에 더 찬란히 빛나는 것 같은 상황이죠. 그러므로 text-shadow 효과는 백그라운드가 다소 어두운 요소에서 사용하면 훨씬 더 눈에 잘 들어 올 것입니다.

 

위의 링크글에서도 알 수 있듯 text-shadow안에는 네 개의 옵션을 넣을 수 있습니다. 첫번째는 x축 위치, 두번째는 y축 위치, 세번째는 퍼지는 정도의 값, 즉! Feather값이며 마지막 네번째가 색상입니다. 색상는 16진수 헥사코드를 사용해도 되고 rgba값을 사용해도 상관 없습니다. 네온사인의 경우는 글씨 자체에 바로 적용되도록 연출해야 하기에 x축과 y축 값을 모두 0으로 설정하는것이 좋습니다. 세번째 Feather값만 본인의 취향에 맞게 적절히 조절하시면 될 것 같습니다 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band