[HTML/CSS] 텍스트에 그림자 효과 넣기 (text-shadow)

텍스트에 그림자 효과 넣기 (text-shadow)

 

사용법

text-shadow: horizontality vertical blur color | none | initial | inherit

• horizontality : 그림자 수평 위치 (필수)
• vertical : 그림자 수직 위치 (필수)
• blur : 흐림 정도 (값을 정하지 않으면 0)
• color : 그림자 색 (값을 정하지 않으면 브라우저 기본값)
• none : 그림자 효과를 없앤다.
• initial : 기본값으로 설정한다.
• inherit : 부모 요소의 속성값을 상속받는다.

수직 그림자(horizontality)

HTML

<p class="s1">동해물과 백두산이 마르고 닳도록</p>
<p class="s2">동해물과 백두산이 마르고 닳도록</p>
<p class="s3">동해물과 백두산이 마르고 닳도록</p>
<p class="s4">동해물과 백두산이 마르고 닳도록</p>
<p class="s5">동해물과 백두산이 마르고 닳도록</p>
<p class="s6">동해물과 백두산이 마르고 닳도록</p>

CSS

.s1 { text-shadow: -9px 2px 2px gray; }
.s2 { text-shadow: -5px 2px 2px gray; }
.s3 { text-shadow: -2px 2px 2px gray; }
.s4 { text-shadow: 2px 2px 2px gray; }
.s5 { text-shadow: 5px 2px 2px gray; }
.s6 { text-shadow: 9px 2px 2px gray; }

 

수평 그림자(vertical)

HTML

<p class="s1">동해물과 백두산이 마르고 닳도록</p>
<p class="s2">동해물과 백두산이 마르고 닳도록</p>
<p class="s3">동해물과 백두산이 마르고 닳도록</p>
<p class="s4">동해물과 백두산이 마르고 닳도록</p>
<p class="s5">동해물과 백두산이 마르고 닳도록</p>
<p class="s6">동해물과 백두산이 마르고 닳도록</p>

CSS

.s1 { text-shadow: 2px -9px 2px gray; }
.s2 { text-shadow: 2px -5px 2px gray; }
.s3 { text-shadow: 2px -2px 2px gray; }
.s4 { text-shadow: 2px 2px 2px gray; }
.s5 { text-shadow: 2px 5px 2px gray; }
.s6 { text-shadow: 2px 9px 2px gray; }

 

그림자 흐림 정도

HTML

<p class="s1">동해물과 백두산이 마르고 닳도록</p>
<p class="s2">동해물과 백두산이 마르고 닳도록</p>
<p class="s3">동해물과 백두산이 마르고 닳도록</p>

CSS

.s1 { text-shadow: 2px 2px 2px gray; }
.s2 { text-shadow: 2px 2px 5px gray; }
.s3 { text-shadow: 2px 2px 10px gray; }

 

그림자 중첩하기

HTML

<h1 class="s1">불에 타는 듯한 그림자 효과</h1>

CSS

.s1{
  color: red;
  text-shadow: 
    0px 0px 4px #ccc, 
    0px -5px 4px #ff3, 
    2px -10px 6px #fd3, 
    -2px -15px 11px #680, 
    2px -19px 18px #f20;
}