[CSS 살펴보기] text-shadow를 이용한 다양한 효과

CSS의 text-shadow로 줄 수 있는 효과에 대하여 몇가지 실펴 보겠습니다.

 

 

 

text-shadow 요약

 

CSS의 text-shadow는 텍스트에 그림자를 표현하기 위한 속성 입니다.

 

여러개의 그림자를 ,(콤마)로 구분하여 겹쳐 사용 할 수 있습니다.

 

,(콤마)를 기준으로 뒤로 갈수록 그림자는 하단에 위치하게 됩니다.

 

 

text-shadow 문법

 

text-shadow: [<color> <x-좌표> <y-좌표> <blur>,][<x-좌표> <y-좌표> <blur> <color>,]

 

※ color은 앞에 올 수도 있고 뒤에 올 수도 있습니다.

※blur는 기본값이 0이며 생략 가능 합니다. 또한 값이 클수록 그림자는 더 크고 흐려 집니다.

 

 

그럼 몇가지 사용 예시를 보겠습니다.

 

 

 

1. 입체 효과

 

입체 효과

 

이 예시는 아래와 같이 그림자를 2번 주었습니다.

 

 

처음  그림자는 밝은 그림자를 주고 가장 하단에 글자와 같은 색을 주어 마치 두께가 있는듯 또는 센드위치처럼 중앙에 뭔가 있는 듯한 효과를 줍니다.

 

X,Y 값이 너무 멀면 효과가 떨어 집니다. 글자 크기에 따라 X,Y 값을 조절해야 합니다.

 

text-shadow: 2px 2px 0px #eee, 4px 4px 0px #000

 

 

 

 

2. 네온 효과

 

네온 효과

 

이 예시는 아래와 같이 그림자를 여러번 주고 blur 값을 크게 주어 번짐과 흐려짐 효과를 크게 주었습니다.

 

이 효과의 경우 배경이 어두운 경우 효과를 뚜렷하게 보실 수 있습니다.

 

text-shadow: 0 0 1px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

 

 

 

3. 들어간(오목) 효과

 

오목 효과

 

보시는 것 과 같이  이번 예시에서 주어진 쉐도우 는 약간의 blur값과 Y값을 주었습니다.

 

이 두값의 적절한 조절만으로도 글자가 오목하게 들어간듯한 효과를 줄 수 있습니다.

 

 

text-shadow: 0px 2px 3px #666;

 

 

 

4. 불(火)타는 효과

 

불타는 효과

 

이 효과의 경우 네온 효과와 비슷합니다.

 

blur값과 적당한 X,Y 값과 가장 중요한 노란색 계통과 붉은 색 계통을 적절히 이용하는 것입니다. 뒤로 갈 수록 -y 좌표를 많이 주어 위로 타올르는 듯한 효과를 줍니다.

 

 

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

 

 

이 외에도 다양한 효과들이 있습니다.

 

여기서는 가장 대표적인 4가지만 살펴 보았는데요. 인터넷을 돌아보시면 많은 분들이 만들고 발견한 예시들이 많습니다.

 

감사합니다.