text-shadow

요약

CSS의 text-shadow 는 텍스트에 그림자(shadow)를 표현하기 위한 속성이다. 콤마(,)로 구분된 그림자 설정정보 리스트가 텍스트와 엘리먼트(element) text-decorations 속성에 적용될 수 있다.

각각의 그림자(shadow)에는 색상(color, 생략가능)값, blur범위(blur radius, 생략가능)값들과 함께 텍스트로부터의 위치값(offset)이 설정된다.

여러개의 그림자(multiple shadows)가 가장 상단에 최초로 설정된 그림자와 앞뒤로 적용될 수 있다.

문법

text-shadow: none | [<shadow>,]* <shadow>

  where <shadow> is:

[ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]

속성값

<color>

선택값(생략가능). 위치값(offset)이전/이후에 설정이 가능하다. 색상(color)값이 설정되지 않으면, 브라우저 기본값(UA-chosen color)이 사용된다.

주의: 만약 다양한 브라우저에서 동일하게 표현하고 싶다면, 특정 색상(color)을 지정할 것.

<offset-x> <offset-y>

필수값. 텍스트로부터의 그림자(shadow)의 위치(offset)를 설정하기 위한 <length> 타입의 값이다. <offset-x> 은 수평(x축)거리를 설정하는 값이며, 음수값은 그림자가 텍스트의 왼쪽(left)에 나타나게 한다. <offset-y> 는 수직(y축)거리를 설정하는 값이며, 음수값은 그림자가 텍스트 위(above)쪽에 나타나게 한다. 두 값이 모두 0 인 경우, 그림자가 텍스트 바로 뒤(behind)에 위치한다(그리고 <blur-radius> 값이 설정된 경우에는 blur 효과가 나타나게 된다).

사용가능한 값의 단위는 <length> 를 참고하도록 하자.

<blur-radius>

선택값(생략가능). <length> 타입의 값이다. 만약 값이 설정되지 않았다면, 기본값(default)인 0 으로 설정된다. 이 값이 클수록 더 큰 blur효과가 나타나며, 그림자는 더욱 커지고 흐려진다.

예제

text-shadow: orange 0 -2px;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
             rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
             rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
color: gold;
background: gold;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

명세

CSS 속성인 text-shadow 는 CSS2에서는 부적절하게 정의되었으며(improperly defined in CSS2) CSS2(Level 1)에서 제거 되었다. CSS Text Module Level 3 명세에서는 해당 문법이 좀 더 개선되었고 정밀해졌다. 이후, 이 문법은 신규 working draft CSS Text Decoration Module Level 3 에 포함되었다.

브라우저 호환성

• Gecko (Firefox) 는 이론적으로는 무한의 text-shadows를 지원한다(시도해보지는 말것).
  Gecko 2 와 이후버전은 성능상 이유로 blur radius 크기를 300으로 제한했다.
  만약 <color> 값이 설정되지 않는다면, Gecko 는 엘리먼트(element)의 color 속성 값을 사용한다..
• Opera 는 성능상 이유로 최대 6-9개의 text-shadows 를 지원한다. blur radius 는 100px로 제한한다.
  Opera 9.5-10.1 등의 오래된 버전은 그리는 순서(painting order)가 기존과 반대이다(CSS2에서는 첫번째로 설정된 그림자가 가장 하단(bottom)에 위치한다).
• Internet Explorer 5.5 는 Microsoft의 Shadow and DropShadow Filter를 지원한다.
• Safari: 색상(color)이 지정되지 않은 그림자는 투명(transparent)하게 표시된다.
  Safari 1.1-3.2 는 하나의 text-shadow만을 지원한다(콤마(,)로 구분된 그림자(shadow) 중 첫번째 그림자 설정만 표시되며, 나머지 그림자 설정은 표시되지 않는다).
  Safari 4.0 (WebKit 528) 과 이후 브라우저는 다중(multiple) text-shadows을 지원한다.
• Konqueror 는 3.4버전부터 text-shadow를 지원한다.

참고자료

• box-shadow