• Q&A
  • 회원가입
  • 로그인

[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

애니 효과 : 가능

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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012