CSS 글자 꾸미기 - 텍스트 그림자 효과

웹문서의 글자에 그림자를 부여하는 효과입니다.

text-shadow: offset-x offset-y blur-radius color

offset-x : 가로거리
offset-y : 세로거리
blur-radius : 번짐 정도
color : 색상

그림자 효과

.text-shadow { text-shadow: 1px 1px 1px #666 }

위와 같은 효과는 text-shadow: 1px 1px 1px #666;과 같은 속성 값으로 표현할 수 있는 가장 이상적인 효과일 것입니다.

text-shadow: 1px 1px 5px #f40

그림자색을 변경하여 붉은색에 번짐 효과를 늘린 결과입니다. 수치를 변경해가며 적절한 효과를 찾을 수 있습니다.

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

번짐 효과는 0으로 하고 가로 세로 거리를 3 정도식 늘렸습니다.

text-shadow: 10px 10px 1px #0100ff,20px 20px 1px #f40

.text-shadow { text-shadow: 10px 10px 1px #0100ff, 20px 20px 1px #f40 }

그림자 효과는 , 쉼표를 이용하여 중복하여 설정이 가능합니다. 다만 첫 번째 설정 거리가 3px 3px 두 번째 거리는 배수나 그보다 많은 값을 가지지 않으면 첫 번째 효과와 겹치기 때문에 효과가 반감되기에 두 번째 효과는 그보다 많은 값을 입력해줍니다.

텍스트 쉐도우 효과는 거리는 필수 입력을 해줘야 하며 번짐은 0으로 색상은 웹 설정값으로 기본값이 설정이 됩니다.