CSS

[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>

 

결과보기


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

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
1/33
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 4
웹유틸
회원센터
홈짱 PC버전 로그인