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

지음
0쪽
0원
1970년 1월 1일

드롭 섀도우는 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

텍스트 섀도우 정의

CSS 규칙에 text-shadow 속성을 추가한다. CSS 선언 목록에 text-shadow를 입력하고 이어서 콜론(:)을 입력한다(코드 6.5).
```
text-shadow:
```
x, y 오프셋을 지정한다. 간격을 입력하고 두 개의 양수 또는 음수 길이 값을 공백으로 구분해 입력한다.
```
2px 2px
```
이때 첫 번째 값은 섀도우의 상하 오프셋(양수는 아래쪽, 음수는 위쪽)을 나타내고 두 번째 값은 좌우 오프셋(양수는 오른쪽, 음수는 왼쪽)을 나타낸다.
블러 정도를 지정한다. 공백을 입력하고 섀도우에 적용할 블러 값에 해당하는 양수 길이 값을 지정한다. 이때 음수값을 입력하면 모두 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; }

색상을 지정한다. 공백을 입력하고 섀도우에 사용할 색상값을 입력한다.
```
rgba(0,0,0,.5);
```
색상값에 대한 더 자세한 내용은 7장의 ‘색상값 선택’을 참고하자.
더 많은 섀도우를 추가한다. 텍스트 블록에는 (원하는 개수만큼) 섀도우를 여러 개 추가할 수 있다. 또 다른 섀도우를 추가하려면 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 의사 클래스와 함께 사용하면 페이지에서 링크를 강조하는 멋진 효과를 보여줄 수 있다.

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

텍스트 섀도우 정의

엮인 글

소셜 댓글