CSS 그림자속성 (Shadow Property) - Text-shadow, Box-shadow

CSS3에는 요소(박스형태)에 그림자를 부여하는 box-shadow와 글자에 그림자를 부여하는 text-shadow가 있습니다. 글자에 그림자를 부여하는 경우는 한글 폰트의 희박성으로 효과가 미미하나 박스형태의 그림자 부여는 얼마든지 사용할 수 있습니다.

그림출처 : http://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/

text-shadow

글자에 그림자를 생성한다.

• IE9 버전까지는 지원하지 않고 자체 전용 속성인 filter: shadow를 지원하므로 CSS가 유효성 검사를 통과하지 못한다.
• 지원하지 않는 브라우저가 있다해서 text-shadow 속성을 지정해도 해가 될것은 없다. 없으면 없는데로 있으면 있는데로 렌더링될터이니...

모던 브라우저

선택자 { text-shadow: 색상 가로길이 세로길이 번짐; }

.shadow { text-shadow:#999999 5px 5px 5px; }

IE 전용

선택자 { filter:shadow(color=색상, direction=방향, strength=크기); zoom:1; }

.shadow { filter:shadow(color=#999999, direction=135, strength=4); zoom:1; }

방향은 그림자의 방향이다. 0은 상단, 45는 오른쪽 상단, 90은 오른쪽, 135는 오른쪽 하단, 180은 하단, 225는 왼쪽 하단, 270은 왼쪽, 315는 왼쪽 상단을 의미한다. 크기는 px 단위로 지정하는 그림자 크기다.

IE에서 그림자 효과는 zoom:1을 지정해야만 적용된다. IE6는 레이아웃 속성을 부여할 블록 요소가 있어야만 필터 효과를 적용할 수 있다. 지정한 zoom:1으로 인해 레이아웃 속성이 생긴다. 레이아웃 속성은 IE에만 존재한다. 글자 그림자를 넣은 블록 요소에 테두리를 지정하면 IE6는 테두리 둘레와 글자 둘레에 그림자를 이중으로 표시하는 문제가 있다.

text-shadow 간단 예제

양각효과 내기

흰색이 아닌 배경의 어두운 텍스트에 하이라이트 색상(하얀색이나 이와 가까운 색)으로 그림자를 주었을때 가장 잘 발휘된다.

text-shadow: 0 1px 0 rgba(255, 255, 255, .75);

TEXT SHADOW

다중 그림자

그림자 속성 값들을 쉼표로 분리해 기술하면 다중 그림자 효과를 줄 수 있다.

text-shadow: 0px 1px #ffffff, 4px 4px 0px #dad7d7;

TEXT SHADOW

자바스크립트 문법

object.style.textShadow="2px 2px #ff0000"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE10+	지원	지원	지원	지원

box-shadow

CSS3에 추가된 속성으로 box에 하나 이상의 그림자를 만든다.

div {box-shadow: 10px 10px 5px #888888;}

• offset-x, offset-y, blur, spread, color, inset 순으로 작성한다.
• 여러 개의 그림자 속성을 콤마(,)로 구분하여 적용시킬 수 있다.
• 생략된 길이값은 0이 된다.

속성값

• offset-x : 수평 그림자의 offset 값으로 반드시 필요하다.
• offset-y : 수직 그림자의 offset 값으로 반드시 필요하다.
• blur : 그림자 가장자리를 부드럽게 처리하는 정도를 나타나매 선택적 값이다. 0이면 가장 날카롭게 처리한다.
• spread : 그림자의 크기를 나타내며 선택적 값이다.
• color : CSS 컬러 값을 지정하는 선택적 값이다.
• inset : 안쪽 그림자를 정의하는 선택적 키워드이다.

box-shadow 데모 보기

자바스크립트 문법

object.style.boxShadow="10px 10px 5px #888888"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE9+	지원	SF5.1.1	지원	지원

box-shadow에 관련된 예제는 CSS drop-shadows without images에서 더 많은 효과를 경험할 수 있다.