[shadow] CSS - text-shadow 속성 - 글자 그림자/음영 효과 주기 (= text-shadow속성 = 텍스트섀도속성) ※ 오목 글자 효과

1. text-shadow 예제 - 글자 그림자 (= 글자 입체 효과)
2. text-shadow 정의
3. text-shadow 구문
4. 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>

 

결과보기