TEXT-SHADOW        In Korean
CSS3의 text-shadow 속성은    지정된 텍스트 블럭에하나 이상의 그림자를 부여합니다.
브라우저 지원여부
브라우저          지원 문법Firefox 3.6   text-shadowFirefox 4     text-shadowSafari 5      text-shadowChrome 10     text-shadowIE ...
text-shadow 문법
text-shadow 속성은  3개의 길이 값과 1개의 색 값을 사용합니다..test{    text-shadow: 10px 10px 5px #000;}
길이 값은 절대단위 값과                상대단위 값을             모두 사용할 수 있습니다.p   {   text-shadow:   1em   1em   1em   #000;   }p   {   t...
수평 거리
그림자의 수평거리는       첫 번째 항목에서 지정합니다..test{    text-shadow: 10px 10px 5px #000;}               수평거리
정수 값을 사용하면 그림자는      텍스트의 오른쪽에 있게 됩니다..test{    text-shadow: 10px 10px 5px #000;}
TextText   정수 수평 값의 text-shadow
음수 값을 사용하면 그림자는       텍스트의 왼쪽에 있게 됩니다..test{    text-shadow: -10px 10px 5px #000;}
TextText   음수 수평 값의 text-shadow
수직 거리
그림자의 수직거리는       두 번째 항목에서 지정합니다..test{    text-shadow: 10px 10px 5px #000;}                    수직 거리
정수 값을 사용하면 그림자는      텍스트의 아래쪽에 있게 됩니다..test{    text-shadow: 10px 10px 5px #000;}
TextText       정수 수직 값의 text-shadow
음수 값을 사용하면 그림자는       텍스트의 위쪽에 있게 됩니다..test{    text-shadow: 10px -10px 5px #000;}
TextText   음수 수직 값의 text-shadow
흐림(blur) 정도 값
흐림 정도 값은       두 번째 항목에서 지정합니다..test{    text-shadow: 10px 10px 5px #000;}                        흐림 정도 값
흐림 정도 값을 "0"으로 준다면       단단한 테두리를 갖게 됩니다..test{    text-shadow: 10px 10px 0 #000;}
TextText   단단한 테두리의 text-shadow
흐림 정도 값을 높이면    부드럽게 번지는 테두리를 갖게 됩니다..test{    text-shadow: 10px 10px 10px #000;}
TextText   부드러운 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 10p...
흐림 정도 값이 지정되지 않았을 때는     브라우저가 값을 ’0’으로 추정하여       단단한 그림자를 그립니다.                   지정되지 않은 경우 0값 적용.test{    text-shadow:...
색 값이 지정되지 않았을 때는    브라우저 기본 값이 적용될 것입니다.         대부분의 브라우저는      텍스트의 색 값을 사용합니다.                지정되지 않은 경우 텍스트 색 값 적용.tes...
다수의 그림자(Multiple text-shadows)
다수의 text-shadow는     쉼표를 사용하여 지정할 수 있습니다..test{                          Text-shadow 1    text-shadow:    10px 10px 5px #0...
다수의 text-shadow는    쉼표를 사용하여 지정할 수 있습니다..test{                             쉼표 구분자    text-shadow:    10px 10px 5px #000,  ...
다수의 text-shadow는    쉼표를 사용하여 지정할 수 있습니다..test{    text-shadow:             Text-shadow 2    10px 10px 5px #000,    20px 20...
그림자 효과는 앞에서부터 뒤로 적용됩니다.   첫 번째 그림자는 맨 위에 놓이고 다른 그림자는 뒤쪽 레이어에 놓입니다.그림자는 텍스트 위에 덮어질 수 없습니다.
Text Text
Text Text-shadow 1
TextText Text-shadow 2
자, 이제 가서text-shadow를   써봅시다
작성자 : Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLi...
Upcoming SlideShare
Loading in …5
×

CSS3 text-shadow

1,715 views

Published on

Published in: Technology
  • Be the first to comment

CSS3 text-shadow

  1. 1. TEXT-SHADOW In Korean
  2. 2. CSS3의 text-shadow 속성은 지정된 텍스트 블럭에하나 이상의 그림자를 부여합니다.
  3. 3. 브라우저 지원여부
  4. 4. 브라우저 지원 문법Firefox 3.6 text-shadowFirefox 4 text-shadowSafari 5 text-shadowChrome 10 text-shadowIE 9 noOpera 11 text-shadow
  5. 5. text-shadow 문법
  6. 6. text-shadow 속성은 3개의 길이 값과 1개의 색 값을 사용합니다..test{ text-shadow: 10px 10px 5px #000;}
  7. 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; }
  8. 8. 수평 거리
  9. 9. 그림자의 수평거리는 첫 번째 항목에서 지정합니다..test{ text-shadow: 10px 10px 5px #000;} 수평거리
  10. 10. 정수 값을 사용하면 그림자는 텍스트의 오른쪽에 있게 됩니다..test{ text-shadow: 10px 10px 5px #000;}
  11. 11. TextText 정수 수평 값의 text-shadow
  12. 12. 음수 값을 사용하면 그림자는 텍스트의 왼쪽에 있게 됩니다..test{ text-shadow: -10px 10px 5px #000;}
  13. 13. TextText 음수 수평 값의 text-shadow
  14. 14. 수직 거리
  15. 15. 그림자의 수직거리는 두 번째 항목에서 지정합니다..test{ text-shadow: 10px 10px 5px #000;} 수직 거리
  16. 16. 정수 값을 사용하면 그림자는 텍스트의 아래쪽에 있게 됩니다..test{ text-shadow: 10px 10px 5px #000;}
  17. 17. TextText 정수 수직 값의 text-shadow
  18. 18. 음수 값을 사용하면 그림자는 텍스트의 위쪽에 있게 됩니다..test{ text-shadow: 10px -10px 5px #000;}
  19. 19. TextText 음수 수직 값의 text-shadow
  20. 20. 흐림(blur) 정도 값
  21. 21. 흐림 정도 값은 두 번째 항목에서 지정합니다..test{ text-shadow: 10px 10px 5px #000;} 흐림 정도 값
  22. 22. 흐림 정도 값을 "0"으로 준다면 단단한 테두리를 갖게 됩니다..test{ text-shadow: 10px 10px 0 #000;}
  23. 23. TextText 단단한 테두리의 text-shadow
  24. 24. 흐림 정도 값을 높이면 부드럽게 번지는 테두리를 갖게 됩니다..test{ text-shadow: 10px 10px 10px #000;}
  25. 25. TextText 부드러운 text-shadow
  26. 26. 흐림 정도 값에서는 음수 값의 사용이 불가합니다..test{ text-shadow: -10px -10px 5px #000;}
  27. 27.
  28. 28. 색은 길이 값의 앞 또는 뒤에 지정 할 수 있습니다..test{ text-shadow: #000 10px 10px 5px;}
  29. 29. 색은 다양한 표기방법으로 사용할 수 있습니다. • 키워드 • 6자리 16진수 표기 • 3자리 16진수 표기• RGB/RGBA 숫자형 표기• RGB/RGBA 퍼센트 표기 • HSL/HSLA
  30. 30. 필수 값과 옵션 값
  31. 31. Text-shadow는 두 개의 거리 값이 꼭 존재해야 합니다. 흐림 정도, 그림자 색 값은 옵션입니다..test 필수 옵션{ text-shadow: 10px 10px 5px #000;}
  32. 32. 흐림 정도 값이 지정되지 않았을 때는 브라우저가 값을 ’0’으로 추정하여 단단한 그림자를 그립니다. 지정되지 않은 경우 0값 적용.test{ text-shadow: 10px 10px ? #000;}
  33. 33. 색 값이 지정되지 않았을 때는 브라우저 기본 값이 적용될 것입니다. 대부분의 브라우저는 텍스트의 색 값을 사용합니다. 지정되지 않은 경우 텍스트 색 값 적용.test{ text-shadow: 10px 10px 5px ?;}
  34. 34. 다수의 그림자(Multiple text-shadows)
  35. 35. 다수의 text-shadow는 쉼표를 사용하여 지정할 수 있습니다..test{ Text-shadow 1 text-shadow: 10px 10px 5px #000, 20px 20px 20px yellow;}
  36. 36. 다수의 text-shadow는 쉼표를 사용하여 지정할 수 있습니다..test{ 쉼표 구분자 text-shadow: 10px 10px 5px #000, 20px 20px 20px yellow;}
  37. 37. 다수의 text-shadow는 쉼표를 사용하여 지정할 수 있습니다..test{ text-shadow: Text-shadow 2 10px 10px 5px #000, 20px 20px 20px yellow;}
  38. 38. 그림자 효과는 앞에서부터 뒤로 적용됩니다. 첫 번째 그림자는 맨 위에 놓이고 다른 그림자는 뒤쪽 레이어에 놓입니다.그림자는 텍스트 위에 덮어질 수 없습니다.
  39. 39. Text Text
  40. 40. Text Text-shadow 1
  41. 41. TextText Text-shadow 2
  42. 42. 자, 이제 가서text-shadow를 써봅시다
  43. 43. 작성자 : Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley번역 : Toby YunSK communicationsSite: tobyyun.comTwitter: twitter.com/tobyyunSlideshare: slideshare.net/headvoy

×