텍스트 그림자

Internet Explorer 10 및 JavaScript로 작성한 Windows 스토어 앱은 CSS3(Cascading Style Sheets, Level 3) text-shadow 속성을 사용한 텍스트 그림자를 지원합니다.

text-shadow 속성

text-shadow 속성은 지정한 텍스트에 그림자 효과를 적용하며 W3C(World Wide Web 컨소시엄) CSS 텍스트 데코레이션 모듈 수준 3에 정의되어 있습니다. box-shadow 속성의 구문을 잘 알고 있다면 text-shadow의 구문도 이미 알고 있는 것입니다. 두 구문은 거의 동일합니다.

속성설명

text-shadow

지정한 텍스트에 하나 이상의 그림자를 연결하는 쉼표로 구분된 그림자 목록입니다. 각 그림자는 공백으로 구분된 다음 항목의 목록으로 구성됩니다.

  • horizontal offset  필수. 양수 값은 텍스트 오른쪽에 오프셋된 그림자를 그리고, 음수 길이는 왼쪽에 오프셋된 그림자를 그립니다.
  • vertical offset  필수. 양수 값은 텍스트 아래에 오프셋된 그림자를 그리고, 음수 값은 위에 오프셋된 그림자를 그립니다.
  • blur distance  음수 값은 허용되지 않습니다. blur 값이 0이면 그림자 가장자리가 선명합니다. 그렇지 않으면 값이 클수록 그림자 가장자리가 흐려집니다.
  • spread distance  양수 값을 지정하면 그림자 모양이 지정한 반경만큼 모든 방향으로 확장됩니다. 음수 값을 지정하면 그림자 모양이 축소됩니다. 이 값은 일부 브라우저에서 지원되지 않을 수도 있습니다.
  • color  지원되는 CSS 스타일시트 색 값 중 하나입니다.

 

text-shadow 속성이 inset 키워드를 인식할 수 없다는 점을 제외하고 box-shadow 속성의 구문은 text-shadow 속성의 구문과 거의 동일합니다.

다음 예제에서는 소량의 흐림 값이 있는 진한 회색 그림자를 지정한 텍스트의 오른쪽 아래에 적용합니다.


.myselector 
{
...
  text-shadow: 0.1em 0.1em 0.15em #333;
}

짧은 텍스트 블록에 선택기를 적용하면 다음과 같은 결과가 나타납니다.

회색 텍스트 그림자가 적용된 "Internet Explorer 10" 텍스트

W3C에는 text-shadow 도움말 및 예제로 구성된 페이지인 CSS 텍스트 그림자가 있습니다.

API 참조

text-shadow

샘플 및 자습서

CSS 텍스트 그림자 샘플
CSS를 사용하여 재미있는 텍스트 효과를 추가하는 방법

Internet Explorer 테스트 드라이브 데모

실습: 텍스트 그림자

IEBlog 게시물

IE10에서 표준 기반 웹 그래픽으로 이동
IE10의 CSS3 텍스트 그림자

사양

CSS 텍스트 데코레이션 모듈 수준 3: 섹션 4

관련 항목

배경 및 테두리
CSS3 마스터: 확인해야 할 7가지 못진 텍스트 그림자 샘플
CSS3 마스터: 텍스트 그림자

 

 

표시:
© 2014 Microsoft