CSS / text-shadow / 글자에 그림자 효과를 주는 속성

개요

text-shadow는 글자에 그림자 효과를 주는 속성입니다.

  • 기본값 : none
  • 상속 : Yes
  • 애니메이션 : Yes
  • 버전 : CSS Level 3

문법

text-shadow: offset-x offset-y blur-radius color | none | initial | inherit
  • offset-x : 그림자의 수평 거리를 정합니다. (필수)
  • offset-y : 그림자의 수직 거리를 정합니다. (필수)
  • blur-radius : 흐림 정도를 정합니다. (선택 : 값을 정하지 않으면 0)
  • color : 색을 정합니다. (선택 : 값을 정하지 않으면 브라우저 기본값)
  • none : 글림자 효과를 없앱니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제 1

offset-x의 값을 증가시키면 그림자의 위치가 오른쪽으로 이동합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p {
        font-family: "Arial Black", sans-serif;
        font-size: 36px;
        font-weight: bold;
        color: #ffffff;
      }
      .s1 { text-shadow: 2px 2px 2px gray; }
      .s2 { text-shadow: 4px 2px 2px gray; }
      .s3 { text-shadow: 6px 2px 2px gray; }
    </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>
  </body>
</html>

예제 2

offset-y의 값을 증가시키면 그림자의 위치가 아래로 이동합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p {
        font-family: "Arial Black", sans-serif;
        font-size: 36px;
        font-weight: bold;
        color: #ffffff;
      }
      .s1 { text-shadow: 2px 2px 2px gray; }
      .s2 { text-shadow: 2px 4px 2px gray; }
      .s3 { text-shadow: 2px 6px 2px gray; }
    </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>
  </body>
</html>

예제 3

blur-radius의 값을 증가시키면 그림자가 흐려집니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p {
        font-family: "Arial Black", sans-serif;
        font-size: 36px;
        font-weight: bold;
        color: #ffffff;
      }
      .s1 { text-shadow: 2px 2px 2px gray; }
      .s2 { text-shadow: 2px 2px 4px gray; }
      .s3 { text-shadow: 2px 2px 6px gray; }
    </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>
  </body>
</html>

예제 4

속성값을 쉼표로 구분하여 여러 번 쓰면 여러 개의 그림자가 생깁니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p {
        font-family: "Arial Black", sans-serif;
        font-size: 60px;
        font-weight: bold;
        color: #0D47A1;
      }
      .s1 {
        text-shadow: 4px 4px 0px #1565C0, 8px 8px 0px #42A5F5, 12px 12px 0px #E3F2FD;
      }
    </style>
  </head>
  <body>
    <p class="s1">Lorem ipsum</p>
  </body>
</html>

예제 5

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        margin: 0px;
      }
      p {
        margin: 20px;
        padding: 20px 0px;
        text-align: center;
        text-transform: uppercase;
        font-family: "Arial Black", sans-serif;
        font-size: 60px;
        font-weight: bold;
      }
      .s1 {
        background-color: #666666;
        color: #222222;
        text-shadow: 2px 2px 3px rgba(255,255,255,0.2);
      }
      .s2 {
        background-color: #E1F5FE;
        color: #ffffff;
        text-shadow: 4px 4px 0px #bdbdbd;
      }
      .s3 {
        background-color: #F44336;
        color: #ffffff;
        text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -3px 20px rgba(255,255,255,0.4);
      }
    </style>
  </head>
  <body>
    <p class="s1">Lorem ipsum</p>
    <p class="s2">Lorem ipsum</p>
    <p class="s3">Lorem ipsum</p>
  </body>
</html>

브라우저 지원

  • Chrome : 4.0+
  • Firefox : 3.5+
  • Internet Explorer : 10.0+
  • Opera : 9.6+
  • Safari : 4.0+

Related Posts

CSS / Flex / align-items

CSS / Flex / align-items

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 예를 들어 flex-direction의 값이 row인 경우 수직 정렬을 정합니다. 아래는 flex-direction: row일 때의 예제입니다. 기본값은 stretch로, 콘테이너의 높이에 맞게 늘립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / table-layout / 표(table) 크기 고정시키기

CSS / table-layout / 표(table) 크기 고정시키기

표(table)는 width 속성으로 가로 크기를 정할 수 있습니다. 다음은 가로 크기가 500px인 간단한 표입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 500px; } td { padding: 10px; border: 1px solid #666666; } </style> </head> <body> <table> <tr> <td class="c1">HAHAHA</td> <td class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</td> </tr> </table> </body> </html> 표 ...

CSS / Grid / grid-auto-rows

CSS / Grid / grid-auto-rows

그리드에서 열 개수는 grid-template-columns로 정합니다. 그 개수를 넘어가면 행이 바뀌죠. 그리고 높이는 행마다 다르게 정해집니다. 예를 들어 다음과 같은 HTML 문서가 있을 때, 첫번째 행의 높이와 다른 행의 높이는 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 표(table) 꾸미기 / 정렬하기

CSS / 표(table) 꾸미기 / 정렬하기

표와 관련된 정렬 표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 표 : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬 입니다. <!doctype html> <html lang="ko"> <head> ...

CSS / 박스 모델(Box Model)

CSS / 박스 모델(Box Model)

Box Model HTML 요소는 박스(box)로 이루어져 있습니다. 박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나갑니다. 예를 들어 다음과 같이 코드를 작성했다면 <body> <header> <h1>Lorem</h1> </header> </body> body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다. 박스의 구성 하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, ...

CSS / Flex / justify-content

CSS / Flex / justify-content

justify-content로 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정합니다. 기본값은 flex-start로 시작점부터 아이템을 배치합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { ...

CSS / IE8 이하에서 border-radius, box-shadow 적용시키는 방법

CSS / IE8 이하에서 border-radius, box-shadow 적용시키는 방법

CSS3에서 많은 속성이 추가되었습니다. 그 중에서 개인적으로 가장 많이 사용하는 것이 border-radius입니다. 테두리를 둥글게 만들거나 이미지를 원으로 만들 때 이미지 편집 프로그램을 사용할 필요가 없기 때문입니다. 하지만 문제가 있습니다. IE8 이하에서는 적용되지 않는다는 것이죠. 이 문제를 해결해주는 것이 PIE입니다. 간단한 코드 한 줄로 IE8 이하에서도 border-radius를 적용시킬 수 있습니다. PIE 다운로드 다음 링크에서 PIE를 다운로드 받습니다. http://css3pie.com/download/ 업로드 압축을 풀면 ...

CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격

CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격

letter-spacing, word-spacing 글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다. 예제 값의 변화에 따른 간격의 변화를 보여주는 예제입니다. 글자 사이의 간격을 변화시키면 단어 사이의 간격도 변합니다. 단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변하지 않습니다. <!doctype html> <html lang="ko"> <head> ...

CSS / Grid / order

CSS / Grid / order

order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / Flex / flex-wrap

CSS / Flex / flex-wrap

flex-wrap은 아이템들의 가로 크기 합이 콘테이너의 가로 크기를 넘어갈 때 어떻게 처리할지를 정합니다. 기본값은 nowrap로... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { box-sizing: border-box; ...

CSS 강좌