CSS3 Text-Shadow (텍스트 그림자)
2016. 7. 15. 23:02ㆍ
CSS3에 추가된 text-shadow 속성은 텍스트에 그림자 효과를 표시합니다.
text-shadow
text-shadow: (오른쪽) (아래) (블러) (색상);
지원 브라우저
IE8 이하를 제외한 대부분의 브라우저에서 지원합니다.
미리보기
예제 1
Text-Shadow 1
<p id="shadow_1">Text-Shadow</p>
#shadow_1 {text-shadow:1px 1px #ccc;}
예제 2
Text-Shadow 2
<p id="shadow_2">Text-Shadow 2</p>
#shadow_2 {text-shadow:-2px -2px 3px #333;}
예제 3
Text-Shadow 3
<p id="shadow_3">Text-Shadow 3</p>
#shadow_3 {text-shadow:0 0 4px white,
0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33,
-2px -15px 11px #FF8800, 2px -25px 18px #FF2200;}
콤마(,)를 사용하여 여러개의 그림자를 추가할 수 있습니다.
이 글은...
- 과거 이 블로그의 글을 정리 후 재 발행하는 글입니다.
- : 첫 발행
- : 2차 발행
그동안 텍스트에 그림자를 입히는법을 몰라서 애먹었는데 도움됐네요. 좋은 글 고맙습니다 ^^
IE만 시원하게 지원 안하는 이런 좋은 프로그램ㅋㅋ 많이 늘어나야할텐데 말이죠 ㅎㅎ
html의 필터로 하던 것들이 css로 바로 적용되네요.
css3는 다양한 효과가 많은 것 같아요.
익스플로러 사용자가 많아 좋을 것을 써 먹지 못할 때가 아쉬워요.
CCS3 관련 정보네요 ㅋㅋ 요즘 연구 중이신가봐용??ㅎㅎ