CSS 그림자 글자와 테두리에 만드는 방법

by

CSS 그림자 글자 설정은 text-shadow 속성을 사용합니다. 흐리게, 중첩이 가능합니다. 테두리의 경우도 box-shadow 속성으로 그림자 설정이 가능합니다.

CSS 그림자 텍스트 : test-shadow

텍스트 그림자 기본

CSS 그림자 위치를 텍스트에 줄 경우 text-shadow 속성으로 구현합니다.

text-shadow: 수평그림자 수직그림자 흐림효과 그림자색;

플러스 값은 오른쪽 또는 아래쪽으로 이동을 의미합니다. 마이너스 값은 왼쪽 또는 위로 이동을 의미합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1{
        text-shadow: 2px 2px 0px red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

텍스트 그림자 흐리게

세 번째 요소에 값을 주면 그림자에 블러효과가 진행됩니다.

text-shadow: 수평그림자 수직그림자 5px 그림자색;
<!DOCTYPE html>
<html>
  <head>
    <style>
      h1{
        text-shadow: 2px 2px 5px blue;
      }
    </style>
  </head>
  <body>
    <h1>안녕하세요?</h1>
  </body>
</html>

텍스트 그림자 중첩

쉼표 , 를 이용해서 여러 가지 그림자를 중첩할 수 있습니다.

text-shadow: 수평그림자 수직그림자 흐림효과 색, 수평그림자 수직그림자 흐림효과 색 ...

아래 예시에서 마이너스 픽셀이란 왼쪽으로 그림자를 주거나 위쪽으로 그림자를 주는 옵션입니다. 총 4개의 그림자를 상, 하, 좌, 우에 중첩하면 테두리 효과를 줄 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1{
        color: white;
        text-shadow: -2px 0px 0px crimson, 2px 0px 0px crimson, 0px 2px 0px crimson, 0px -2px 0px crimson;
      }
    </style>
  </head>
  <body>
    <h1>안녕하시렵니까?</h1>
  </body>
</html>

CSS 테두리 그림자 : box-shadow

테두리 그림자는 box-shadow 속성을 사용해서 구현합니다. text-shadow와 명령어만 다르고 그림자의 방향, 중첩 등의 기능은 모두 동일합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div{
        background-color: pink;
        box-shadow: -5px 5px 0px green;
      }
    </style>
  </head>
  <body>
    <div>앗 나의 실수!</div>
  </body>
</html>

기호에 따라 그림자를 여러개 삽입해서 그림자 색을 구현하는 파트와 명암효과를 주는 파트를 구분해서 편집할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div{
        background-color: cyan;
        box-shadow: -5px 5px 0px blue, 5px 5px 20px green;
      }
    </style>
  </head>
  <body>
    <div>세상에서 가장 빠른 사람은? 비사이로 막가!</div>
  </body>
</html>

워드프레스 등에서 CSS 수정시 그림자가 지워지지 않는 경우 box-shadow 옵션도 지우면 지워지는 경우가 많습니다.