CSS3의 새 기능 – 텍스트 드롭 섀도우 추가

등록일: 2014. 09. 30

쉽고 빠르게 익히는 CSS3

  • 제이슨 크랜포드 티그 지음
  • 유윤선 옮김
  • 456쪽
  • 25,000원
  • 2011년 04월 15일

드롭 섀도우는 2차원 디자인에 깊이감과 질감을 추가하기 위해 오랫동안 사용한 방식이다. 대부분의 브라우저에서는 CSS3에서 제공하는 text-shadow 속성(표 6.5)을 지원한다. 이 속성을 사용하면 색상, 오프셋(x, y), 번짐, 텍스트 드롭 섀도우에 대한 블러를 정의할 수 있다. 이 속성은 현재 일부 브라우저에서 동작하지 않지만 지정하더라도 브라우저에 문제를 일으키지는 않는다.

표 6.5 text-shadow 속성값

속성값 호환성
<color> FF1.9, S1.1, C2, O10, CSS3
<x-offset> FF1.9, S1.1, C2, O10, CSS3
<y-offset> FF1.9, S1.1, C2, O10, CSS3
<blur> FF1.9, S1.1, C2, O10, CSS3
none FF1.9, S1.1, C2, O10, CSS3

텍스트 섀도우 정의

  1. CSS 규칙에 text-shadow 속성을 추가한다. CSS 선언 목록에 text-shadow를 입력하고 이어서 콜론(:)을 입력한다(코드 6.5).

    text-shadow:
    
  2. x, y 오프셋을 지정한다. 간격을 입력하고 두 개의 양수 또는 음수 길이 값을 공백으로 구분해 입력한다.

    2px 2px
    

    이때 첫 번째 값은 섀도우의 상하 오프셋(양수는 아래쪽, 음수는 위쪽)을 나타내고 두 번째 값은 좌우 오프셋(양수는 오른쪽, 음수는 왼쪽)을 나타낸다.

  3. 블러 정도를 지정한다. 공백을 입력하고 섀도우에 적용할 블러 값에 해당하는 양수 길이 값을 지정한다. 이때 음수값을 입력하면 모두 0으로 처리된다.

    2px
    
코드 6.1에 적용한 코드 6.6의 결과 화면. 차이를 확인하려면 수정된 제목을 앞 절의 캡처 화면과 비교해 봐야 하지만 이번에는 엠보싱이 들어간 것처럼 제목이 페이지에서 약간 어둡게 처리됐다. 아울러 이제는 장 제목이 페이지에서 앞으로 튀어나와 보인다.

코드 6.6 text-properties.css : drop-shadow 속성을 사용하면 x, y 오프셋과 블러 반경을 설정할 수 있다. 책 제목에는 이중 섀도우를 적용해 약간의 엠보싱 효과를 주고 장 제목에는 강한 섀도우와 함께 오프셋을 살짝 적용해 제목이 페이지에서 조금 튀어나오는 듯한 효과를 줬다.

/*** CSS3 VQS | Chapter 6 | text-properties.css ***/

body {
    line-height: 1.5; }

h1 {
    letter-spacing: -.05em;
    word-spacing: -.1em;
    line-height: .9em;
    text-shadow: rgba(51,51,51,.9) -1px -1px 3px, rgba(203,203,203,.9) 1px 1px 3px; }

h2 {
    letter-spacing: 2px;
    word-spacing: 3px;
    line-height: 1em;
    text-shadow: rgba(0,0,0,.5) 2px 2px 2px; }
    h2 strong {
    letter-spacing: 0;
    text-shadow: none; }

p {
    word-spacing: .075em;
    line-height: 24px; }

p strong {
    text-transform: uppercase; }
    header + p:first-letter {
    letter-spacing: -.05em;
    line-height: 24px;
    text-shadow: rgba(51,51,51,.9) -1px -1px 3px, rgba(203,203,203,.9) 1px 1px 3px; }

.byline {
    word-spacing: -.3em; }

.byline .author {
    word-spacing: 0;
    text-transform: uppercase; }

.asis {
    text-transform: uppercase; }
  1. 색상을 지정한다. 공백을 입력하고 섀도우에 사용할 색상값을 입력한다.

    rgba(0,0,0,.5);
    

    색상값에 대한 더 자세한 내용은 7장의 ‘색상값 선택’을 참고하자.

  2. 더 많은 섀도우를 추가한다. 텍스트 블록에는 (원하는 개수만큼) 섀도우를 여러 개 추가할 수 있다. 또 다른 섀도우를 추가하려면 CSS 규칙에 다른 text-shadow 선언을 추가하거나 콤마를 입력한 다음 다른 정의를 입력하면 된다.

    text-shadow: rgba(51,51,51,.9) -1px -1px 3px, rgba(203,203,203,.9) 1px 1px 3px;
    

 

Tip CSS에서 기존에 설정한 섀도우를 재정의하려면 값을 none으로 설정하면 된다.

Tip 섀도우에는 RGBA를 사용할 때 결과가 제일 좋다. 이렇게 하면 섀도우 아래에 있는 엘리먼트가 섀도우를 통과하므로 결과가 더 사실적으로 보인다.

Tip 스타일 이름에 ‘섀도우’가 들어가기는 하지만 꼭 그림자 색상이 아니라 어떤 색상도 사용할 수 있다. 예를 들어 텍스트가 어두운 배경을 뒤로 한다면 밝은 색상을 사용해 드롭 ‘글로우’ 효과를 줄 수 있다.

Tip 11장에서는 text-shadow 속성과 매우 유사하게 동작하지만 엘리먼트 박스에 적용되는 box-shadow를 설정하는 법을 배운다.

Tip 섀도우는 자기 앞에 있는 텍스트의 위치에는 영향을 주지 않는다.

Tip 텍스트 섀도우를 :hover 의사 클래스와 함께 사용하면 페이지에서 링크를 강조하는 멋진 효과를 보여줄 수 있다.