목차
- text-shadow 예제 - 글자 그림자 (= 글자 입체 효과)
- text-shadow 정의
- text-shadow 구문
- text-shadow 예제 - 오목한 글자 효과
text-shadow 예제 - 글자 그림자 (= 글자 입체 효과)
<style>
p {margin-bottom:50px; font-size:20px;}
.ex1 { text-shadow: 2px 2px #f80542;}
.ex2 { text-shadow: 2px 2px 8px #f80542;}
.ex3 { text-shadow: 2px 2px 4px #f80542; color:white;}
.ex4 { text-shadow: 0 0 3px #f80542, 0 0 5px blue; color:white;}
</style>
<h1 class="ex1">ex1. 홈짱닷컴 Homzzang.com</h1>
<p >text-shadow: 2px 2px #f80542;</p>
<h1 class="ex2">ex2. 홈짱닷컴 Homzzang.com</h1>
<p>text-shadow: 2px 2px 8px #f80542;</p>
<h1 class="ex3">ex3. 홈짱닷컴 Homzzang.com</h1>
<p>text-shadow: 2px 2px 4px #f80542; color:white;</p>
<h1 class="ex4">ex4. 홈짱닷컴 Homzzang.com</h1>
<p>text-shadow: 0 0 3px #f80542, 0 0 5px blue; color:white;</p>
결과보기
text-shadow 정의
글자 그림자 (= 글자 음영) 지정.
1.
- 기본값: none
- 상속여부: O
- 애니가능: O
- CSS버전: CSS3
- JS구문 : object.style.textShadow="10px 20px 30px pink"
2.
IE10 이상 주요 최신 브라우저 지원.
text-shadow 구문
selector {box-shadow: none | h-offset v-offset blur spread color | initial | inherit;}
[속성값]
none
기본값. shadow 효과 적용 안 함.
h-offset
필수. 가로길이. (예: 10px)
- 양수: 글자 오른쪽에 위치.
- 음수: 글자 왼쪽에 위치.
v-offset
필수. 세로길이. (예: 10px)
- 양수: 글자 아래쪽에 위치.
- 음수: 글자 위쪽에 위치.
blur
선택. 흐릿함. (예) 10px
spread
선택. 퍼지는 정도.
- 양수: 그림자크기 키움.
- 음수: 그림자크기 줄임.
color
선택. 그림자 색깔. (기본값: 글자색과 동일)
initial
이 속성의 기본값으로 설정.
inherit
부모요소 속성값 상속.
text-shadow 예제 - 오목한 글자 효과
<style>
body {
background:gray;
text-shadow: #eee 0 1px;
font-size:50px;
}
</style>
<p>홈짱닷컴 Homzzang.com</p>
결과보기