CSS text-shadow속성 (그림자 속성)

안녕하세요 이번에는 텍스트의 그림자 출력을 알아봅니다.

css font 속성 값도 둘러보세요

css text 속성 값도 둘러보세요

text-shadow속성을 주면 글씨를 겹쳐서 작성이 가능합니다.

여기서 속성에 변화를 주게되면 그림자 처럼 보이게 되죠~

속성값으로 그림자 문자열의 위치와 색상을 지정하는

4개의 값을 공백으로 구분하여 순서대로 나열합니다.

수평거리와 수직거리는 필수정보이며 양수를 입력시 아래나 우측으로 

음수를 입력시 위쪽과 좌측과 글자가 깔리게 됩니다.

단 간격을 너무 벌리게 되면 다른 글자처럼 보이니주의하세요

흐림정도란 그림자가 퍼지는 거리입니다. 

0이면 본문과 동일색으로 생략가능하며, 0이 기본값입니다.

마지막 속성값으로 그림자 색상지정이 가능하며 또한 반복하여 나열도 가능합니다.

 

 

그림자효과의 속성값의 변화를 주어서 표현을 하면

대한민국

대한민국

대한민국

대한민국

대한민국

 ◇html 소스◇ 

 

<h1 id="a">대한민국</h1>

<h1 id="b">대한민국</h1>

<h1 id="c">대한민국</h1>

<h1 id="d">대한민국</h1>

<h1 id="e">대한민국</h1>

 ◇css 소스◇ 

 #a{font-size:70px; text-shadow : 6px 6px 0 #FF0000;}

 #b{font-size:70px; text-shadow : 6px 6px 10px #FF0000;}

 #c{font-size:70px; text-shadow : -6px -6px 10px #FF0000;}

 #d{font-size:70px; color:white; 

      background-color:black; 

      text-shadow : 6px 6px 5px #FF0000;}

 #e{font-size:70px; 

     text-shadow:4px 4px 0 red, 

     8px 8px 0 yellow,  

     12px 12px 0 blue;}  

이렇듯 각 그림자의 방향과 색상 흐림 정도를 선택할 수 있으며

다양하게 겹쳐 사용도 가능합니다.

또한 ~ 응용을 하면 양각이나 음각 효과나 가능한데요~

바탕색과 글자색을 동일하게 하고 위쪽에 밝은색을 주고 

아래를 어두운색으로 하면 양각의 효과가 

반대로 하면 음각의 효과가 나타납니다.

양각 효과
튀어나온 효과

음각 효과
들어간 효과

 ◇ html 소스◇

 <p id="f">양각 효과 <br />튀어나온 효과</p>

 <br />

 <p id="g">음각 효과 <br />들어간 효과</p>

 ◇ css 소스◇

   #f{font-size:50px; color:#8C8C8C; 

       background-color:#8C8C8C;  

       text-shadow:1px 1px 0 #232323, 

       -1px -1px 0 #EAEAEA;}

   #g{font-size:50px; color:#8C8C8C; 

       background-color:#8C8C8C;  

       text-shadow:1px 1px 0 #EAEAEA, -1px -1px 0 #232323;}

이렇듯 css 속성만으로도 멋진 글자효과를 나타내는게 가능합니다~