CSS3 text-shadow4. 브라우저 지원 문법
Firefox 3.6 text-shadow
Firefox 4 text-shadow
Safari 5 text-shadow
Chrome 10 text-shadow
IE 9 no
Opera 11 text-shadow
6. text-shadow 속성은
3개의 길이 값과 1개의 색 값을 사용합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
7. 길이 값은 절대단위 값과
상대단위 값을
모두 사용할 수 있습니다.
p { text-shadow: 1em 1em 1em #000; }
p { text-shadow: 2ex 2em 2em #000; }
p { text-shadow: 3px 3px 3px #000; }
p { text-shadow: 4in 4in 4in #000; }
p { text-shadow: 5cm 5cm 5cm #000; }
p { text-shadow: 6mm 6mm 6mm #000; }
p { text-shadow: 7pt 7pt 7pt #000; }
p { text-shadow: 8pc 8pc 8pc #000; }
9. 그림자의 수평거리는
첫 번째 항목에서 지정합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
수평거리
10. 정수 값을 사용하면 그림자는
텍스트의 오른쪽에 있게 됩니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
12. 음수 값을 사용하면 그림자는
텍스트의 왼쪽에 있게 됩니다.
.test
{
text-shadow: -10px 10px 5px #000;
}
15. 그림자의 수직거리는
두 번째 항목에서 지정합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
수직 거리
16. 정수 값을 사용하면 그림자는
텍스트의 아래쪽에 있게 됩니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
18. 음수 값을 사용하면 그림자는
텍스트의 위쪽에 있게 됩니다.
.test
{
text-shadow: 10px -10px 5px #000;
}
21. 흐림 정도 값은
두 번째 항목에서 지정합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
흐림 정도 값
22. 흐림 정도 값을 "0"으로 준다면
단단한 테두리를 갖게 됩니다.
.test
{
text-shadow: 10px 10px 0 #000;
}
24. 흐림 정도 값을 높이면
부드럽게 번지는 테두리를 갖게 됩니다.
.test
{
text-shadow: 10px 10px 10px #000;
}
26. 흐림 정도 값에서는
음수 값의 사용이 불가합니다.
.test
{
text-shadow: -10px -10px 5px #000;
}
28. 색은 길이 값의 앞 또는 뒤에
지정 할 수 있습니다.
.test
{
text-shadow: #000 10px 10px 5px;
}
29. 색은 다양한 표기방법으로
사용할 수 있습니다.
• 키워드
• 6자리 16진수 표기
• 3자리 16진수 표기
• RGB/RGBA 숫자형 표기
• RGB/RGBA 퍼센트 표기
• HSL/HSLA
31. Text-shadow는
두 개의 거리 값이 꼭 존재해야 합니다.
흐림 정도, 그림자 색 값은 옵션입니다.
.test 필수 옵션
{
text-shadow: 10px 10px 5px #000;
}
32. 흐림 정도 값이 지정되지 않았을 때는
브라우저가 값을 ’0’으로 추정하여
단단한 그림자를 그립니다.
지정되지 않은 경우 0값 적용
.test
{
text-shadow: 10px 10px ? #000;
}
33. 색 값이 지정되지 않았을 때는
브라우저 기본 값이 적용될 것입니다.
대부분의 브라우저는
텍스트의 색 값을 사용합니다.
지정되지 않은 경우 텍스트 색 값 적용
.test
{
text-shadow: 10px 10px 5px ?;
}
35. 다수의 text-shadow는
쉼표를 사용하여 지정할 수 있습니다.
.test
{ Text-shadow 1
text-shadow:
10px 10px 5px #000,
20px 20px 20px yellow;
}
36. 다수의 text-shadow는
쉼표를 사용하여 지정할 수 있습니다.
.test
{
쉼표 구분자
text-shadow:
10px 10px 5px #000,
20px 20px 20px yellow;
}
37. 다수의 text-shadow는
쉼표를 사용하여 지정할 수 있습니다.
.test
{
text-shadow: Text-shadow 2
10px 10px 5px #000,
20px 20px 20px yellow;
}
38. 그림자 효과는 앞에서부터 뒤로 적용됩니다.
첫 번째 그림자는 맨 위에 놓이고
다른 그림자는 뒤쪽 레이어에 놓입니다.
그림자는 텍스트 위에 덮어질 수 없습니다.
43. 작성자 : Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley
번역 : Toby Yun
SK communications
Site: tobyyun.com
Twitter: twitter.com/tobyyun
Slideshare: slideshare.net/headvoy