CSS 강좌 | 글자 꾸미기 > 글자 그림자 효과 - text-shadow

CSS3부터 text-shadow 속성으로 글자에 그림자 효과를 줄 수 있습니다. 그림자 효과를 위해 이미지 편집 프로그램을 사용해야 했던 불편이 사라졌습니다.

하지만, 인터넷 익스플로러 9 이전 버전에서는 지원되지 않는다는 것에 주의하셔야 합니다.

text-shadow 속성의 문법은 다음과 같습니다.

text-shadow: h-shadow v-shadow blur color

속성값의 의미는 다음과 같습니다.

  • h-shadow : 그림자의 가로 위치 (필수)
  • v-shadow : 글림자의 세로 위치 (필수)
  • blur : 그림자의 번짐 정도 (선택)
  • color : 그림자 색 (선택)

간단한 예는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Text Shadow</title>
    <style>
      .s1 {text-shadow: 2px 2px 2px gray;}
      .s2 {text-shadow: 2px 4px 2px blue;}
      .s3 {text-shadow: 4px 2px 3px red;}
      .s4 {text-shadow: -2px -2px 4px green;}
    </style>
  </head>
  <body>
    <p class="s1">Lorem ipsum dolor sit amet.</p>
    <p class="s2">Lorem ipsum dolor sit amet.</p>
    <p class="s3">Lorem ipsum dolor sit amet.</p>
    <p class="s4">Lorem ipsum dolor sit amet.</p>
  </body>
</html>

Category

Created on 2013-11-13 22:59 | Updated on 2015-07-16 23:19

이 글을 공유하기

Kakao

Book navigation