text-shadow

CSS3 의 text-shadow 속성은 지정된 텍스트 블럭에 하나 이상의 그림자를 부여하는 것입니다.
text-shadow 속성의 문법은 3개의 길이값과 1개의 색 값을 사용합니다.
예를들어 아래와 같습니다.

.class { 
    text-shadow: 5px 5px 5px #333;
}

길이값은 절대값과 상대단위 모두 사용할 수 있습니다.
예: em, ex, px, in, cm, mm, pt, pc

자 이제부터 상세하게 text-shadow 에 대해서 알아보겠습니다.
속성과 값에는 어떤것이 있고, 어떤것이 생략이 가능한지 알아보겠습니다.
내용이 길어서 더보기를 사용했으며, 마우스로 클릭해서 내용을 보시기 바랍니다.

브라우져 지원여부

1. X축 수평거리.

수평거리를 나타내는 값은 첫번째 자리에 있는 값입니다.
아래 이미지를 보시고 참고하세요.

그럼 결과는 아래처럼 우측으로 즉, X축으로 10px 만큼 이동되서 보여집니다.

음수값을 사용하면 왼쪽으로 이동해서 그림자가 생깁니다.

.class {
    text-shadow: -10px 0px 0px green;
}

2. Y축 수직거리.

수직거리 즉 상하의 설정은 두번째 항목입니다.
수치를 올릴수록 아래로 내려갑니다.

결과는 아래와 같습니다.

마찬가지로 음수를 사용하면 텍스트위치보다 위로 이동해서 그림자가 보여집니다.

.class {
    text-shadow: 0px -10px 0px green;
}

3. 흐림정도(blur).

흐림정도는 세번째 항목에서 정합니다.

결과는 아래처럼 보여집니다.

위의 예제에서는 5px 를 줬지만 생략하거나 0을 주면 번짐효과없이 그냥 녹색의 단단한 그림자가 생깁니다.
blur 값에는 음수값을 줄 수 없습니다.

4. 색(color).

색은 네번째 항목에서 정하지만 앞에도 올 수 있습니다.

색으로 사용할 수 있는 값은 아래와 같습니다.

• 키워드 ( 예 : green )
  
• 6자리 16진수 표기 ( 예 : #00ff00 )
• 3자리 16진수 표기 ( 예 : #0f0 )
• RGB/RGBA 숫자형 표기 [ 예 : rgb(0,255,0) ]
  
• RGB/RGBA 퍼센트형 표기 ( 예 : rgb(0%,100%,0%)
• HSL/HSLA [ 색상(hue), 채도(saturation), 명도(lightness), 투명도(opacity) ]
  

5. text-shadow 필수값과 옵션값.

text-shadow 는 두개의 길이값(X,Y)값은 반드시 있어야하고 나머지는 옵션입니다.

생략.
아래처럼 blur값인 흐림정도값이 입력되지 않으면 기본값인 0으로 설정됩니다.

.class {
    text-shadow: 10px 10px ? green;
}

색을 지정하지 않고 생략할 경우는 브라우져의 기본값이 적용됩니다. 대부분의 브라우져는 텍스트의 색 값을 사용합니다.

.class {
    text-shadow: 10px 10px 5px ? ;
}

6. 다수의 그림자 (Multiple text-shadows).

text-shadow 를 여러개 지정할 수 있습니다.
각속성마다 컴마(,)로 분리하며 지정합니다.
아래의 경우 녹색으로 한번 지정하고 두번째는 파랑색으로 지정해봤습니다.
잘 보이게 하기 위해 흐림정도를 1px로 했습니다.

결과는 아래처럼 나옵니다.

즉 효과는 제일 먼저 지정한것이 제일 위에 옵니다.
다음 지정한 그림자는 그 뒤의 레이어에 놓입니다.
그림자는 텍스트 위에 놓일 수 없습니다.