Embed Size (px)
DESCRIPTION
Citation preview
TEXT-SHADOW
In Korean
CSS3의 text-shadow 속성은 지정된 텍스트 블럭에
하나 이상의 그림자를 부여합니다.
브라우저 지원여부
브라우저
Firefox 3.6
Firefox 4
Safari 5
Chrome 10
IE 9
Opera 11
지원 문법
text-shadow
text-shadow
text-shadow
text-shadow
no
text-shadow
text-shadow 문법
text-shadow 속성은 3개의 길이 값과 1개의 색 값을 사용합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
길이 값은 절대단위 값과 상대단위 값을
모두 사용할 수 있습니다.
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; }
수평 거리
그림자의 수평거리는 첫 번째 항목에서 지정합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
수평거리
정수 값을 사용하면 그림자는 텍스트의 오른쪽에 있게 됩니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
Text Text Text 정수 수평 값의 text-shadow
음수 값을 사용하면 그림자는 텍스트의 왼쪽에 있게 됩니다.
.test
{
text-shadow: -10px 10px 5px #000;
}
Text Text Text 음수 수평 값의 text-shadow
수직 거리
그림자의 수직거리는 두 번째 항목에서 지정합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
수직 거리
정수 값을 사용하면 그림자는 텍스트의 아래쪽에 있게 됩니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
Text 정수 수직 값의 text-shadow
Text Text
음수 값을 사용하면 그림자는 텍스트의 위쪽에 있게 됩니다.
.test
{
text-shadow: 10px -10px 5px #000;
}
Text Text 음수 수직 값의 text-shadow Text
흐림(blur) 정도 값
흐림 정도 값은 두 번째 항목에서 지정합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
흐림 정도 값
흐림 정도 값을 "0"으로 준다면 단단한 테두리를 갖게 됩니다.
.test
{
text-shadow: 10px 10px 0 #000;
}
Text Text Text 단단한 테두리의 text-shadow
흐림 정도 값을 높이면 부드럽게 번지는 테두리를 갖게 됩니다.
.test
{
text-shadow: 10px 10px 10px #000;
}
Text Text 부드러운 text-shadow
흐림 정도 값에서는 음수 값의 사용이 불가합니다.
.test
{
text-shadow: -10px -10px 5px #000;
}
색
색은 길이 값의 앞 또는 뒤에 지정 할 수 있습니다.
.test
{
text-shadow: #000 10px 10px 5px;
}
색은 다양한 표기방법으로 사용할 수 있습니다.
• 키워드
• 6자리 16진수 표기 • 3자리 16진수 표기
• RGB/RGBA 숫자형 표기 • RGB/RGBA 퍼센트 표기
• HSL/HSLA
필수 값과 옵션 값
Text-shadow는 두 개의 거리 값이 꼭 존재해야 합니다. 흐림 정도, 그림자 색 값은 옵션입니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
옵션 필수
흐림 정도 값이 지정되지 않았을 때는 브라우저가 값을 ’0’으로 추정하여 단단한 그림자를 그립니다.
.test
{
text-shadow: 10px 10px ? #000;
}
지정되지 않은 경우 0값 적용
색 값이 지정되지 않았을 때는 브라우저 기본 값이 적용될 것입니다.
대부분의 브라우저는 텍스트의 색 값을 사용합니다.
.test
{
text-shadow: 10px 10px 5px ?;
}
지정되지 않은 경우 텍스트 색 값 적용
다수의 그림자 (Multiple text-shadows)
다수의 text-shadow는 쉼표를 사용하여 지정할 수 있습니다.
.test
{
text-shadow:
10px 10px 5px #000,
20px 20px 20px yellow;
}
Text-shadow 1
다수의 text-shadow는 쉼표를 사용하여 지정할 수 있습니다.
.test
{
text-shadow:
10px 10px 5px #000,
20px 20px 20px yellow;
}
쉼표 구분자
다수의 text-shadow는 쉼표를 사용하여 지정할 수 있습니다.
.test
{
text-shadow:
10px 10px 5px #000,
20px 20px 20px yellow;
}
Text-shadow 2
그림자 효과는 앞에서부터 뒤로 적용됩니다. 첫 번째 그림자는 맨 위에 놓이고
다른 그림자는 뒤쪽 레이어에 놓입니다. 그림자는 텍스트 위에 덮어질 수 없습니다.
Text Text
Text Text Text-shadow 1
Text Text Text Text-shadow 2
자, 이제 가서 text-shadow를
써봅시다
작성자 : 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
