CSS 텍스트 그림자 효과 (text-shadow in css3)

CSS 2009.10.12 22:13

CSS 텍스트 그림자 효과(text-shadow in css3)

CSS3에서는 포토샵의 그림자효과 같은 텍스트에 여러 효과를 주는 기능이 추가되었다.추가된 기능들을 보자

텍스트 그림자(Text-shadow)

W3C에 정의 참조

흔히 우리는 포토샵에서 그림자효과로 drop shadow를 사용한다. 텍스트에 그림자를두는 건데 css3로 표현 가능하다.아래와같은 효과 이에대한 코드를 보자(사파리3.0이상,파폭3.1이상,오페라9.5에서 적용된다)

예제를 통해 이그림과 같은 효과를 볼 것이다

Text-shadow

css코드 가로,세로, 번짐효과, 그림자색깔, 이순서다.

p{text-shadow: 2px 2px 1px #000;}

위와 같은 경우 그림자가 가로 2px서로 2px 번짐효과 2px 이렇게일어난다.그리고 색깔은 검정(#000)

좋은예제는 아래두링크


설정

트랙백

댓글