CSS3 text-shadow

텍스트의 입체적인 효과를 위한 text-shadow

text-shadow 속성을 이용하여 텍스트에 그림자 효과를 표현하는 기능은 오래전부터 사용되어 왔으며 2005년 사파리 브라우저에서 이 기능이 최초로 구현됐습니다.

하지만 이 속성은 브라우저사들이 모두 구현하지 않던 탓에 CSS2.1 에서 제외되었습니다.

이후 이 속성은 CSS3 명세서에 다시 등록되었고 최근 모던 브라우저에서 거의 구현되어 있습니다.

text-shadow

텍스트의 그림자 위치는 x와 y 좌표를 사용하여 지정합니다.

가장 단순한 문법 형태는 2개의 값만 사용하는 것으로 x는 텍스트로부터 수평으로 떨어진 거리(x 오프셋)를 y는 수직으로 떨어진 거리(y 오프셋)을 나타냅니다.

그리고 기본 설정에 의해 그림자의 색상은 부모 요소(보통은 검정색)로부터 상속받으므로, 이와 다른 색상을 지정하려면 별도의 색상 값을 지정해야 합니다.

css

.seletor-01 {
    text-shadow: x y;
}
.seletor-02 {
    text-shadow: x y color;
}

다음의 예제는 우측으로 3px, 아래로 3px 이동한 위치에 회색 그림자를 표현합니다.

html

<h1>Shadows</h1>

<style>
    h1 {
        text-shadow: 3px 3px #bbb;
    }
</style>

offset 값으로 양수만을 사용할 필요는없으며, 좌표값으로 0은 물론 음수를 사용할 수도 있습니다.

다음의 예제를 살펴보도록 합니다.

See the Pen text-shadow #1 by jaeheekim (@jaehee) on CodePen.

좌표축과 좌표계에 대한 이해

CSS3에 도입된 문법 개념으로 좌표축에 대한 것이 있습니다.

수학 수업시간에 얼핏(?) 들었던 내용과 비슷하지만 조금 다른 접근 방식이 필요합니다.

CSS는 서로 직각으로 교차하는 카르테시안 좌표계를 사용하는데 수평선은 x축, 수직선은 y축, 두 선이 교차하는 부분은 원점(origin)이라고 합니다.

여기까지는 일반적으로 생각하는 그 좌표축이 맞지만 CSS는 각 좌표축을 따라 양수(+)와 음수(-) 부호를 다음과 같이 사용하고 있습니다.

이 좌표계의 값은 원점으로부터의 거리를 나타내며, 양수와 음수는 방향성을 나타냅니다.

즉, 각 점의 좌표는 원점과의 방향과 거리를 나타냅니다.

위 이미지의 좌표 (5, 3) 은 x 축을 따라 5픽셀만큼 이동하고 y축 양수방향으로 3픽셀만큼 이동한 지점을 의미합니다.

다른 예로 좌표 (-3, -5) 는 x축을 따라 음수 방향으로 3픽셀, y축을 따라 음의 방향으로 5픽셀만큼 이동한 지점을 나타냅니다.

좌표계의 내용이 이상하게 느껴진다 해도 지금까지 background-position 같은 여러 속성을 통해 사용하고 있기 때문에 이 내용을 상기해보면 어렵지 않게 이해할 수 있을 것입니다.

text-shadow 속성에는 네 번째 옵션인 blur-radius 가 있습니다.

이 옵션은 그림자 효과에 블러 효과를 추가하는데, 이 값은 반드시 오프셋 값 뒤에 지정해야 합니다.

블러 효과(흐리게 하는 기능)를 추가한 예제를 살펴보도록 합니다.

See the Pen text-shadow #2 by jaeheekim (@jaehee) on CodePen.

첫 번째 black 글자는 같은 오프셋 값을 사용하고 5px만큼 흐리게 하는 blur-radius 값을 추가하여 좀 더 부드러운 그림자 효과를 표현했으며, 두 번째 white 글자에는 오프셋 값은 0으로 설정하고  블러 효과만 8px 을 정의하여 텍스트 자체는 배경 색상과 동일하지만 블러 효과로 인헤 텍스트가 입체적으로 보이도록 나타내었습니다.

다중 음영 효과 표현하기

지금까지 글자에 그림자를 하나만 표현했으나 text-shadow 명세서는 텍스트에 여러 개의 그림자를 추가할 수 있는 문법을 지원하고 있습니다.

그림자 여러 개를 표현하기 위해서는 쉼표를 구분자로 하여 속성 값만 추가하여 사용할 수 있습니다.

여러 개의 그림자를 표현한 다음의 예제를 살펴보도록 합니다.

See the Pen text-shadow #3 by jaeheekim (@jaehee) on CodePen.

첫 번째 예제는 x 오프셋 값을 0으로 정의하고 y 오프셋 값을 -2px 에서 -8px 까지 음수로 정의하였습니다.

그리고 blur-radius 값은 3px 에서 9px 을 적용하고, 그림자 색상은 점진적으로 어두운 색상으로 만들어서 글자 아래는 형광등으로 비춘 듯한 밝은 색이 나타나도록 표현하고 글자에서 멀어질수록 점점 진한 그림자가 나타나도록 표현했습니다.

두 번재 예제는 x 오프셋 값은 0인 동일한 값으로 y 오프셋만 양의 방향으로 점차 증가시켰습니다. 그리고 blur-radius 를 첫 번째 예제와 동일하게 설정하고 이번에는 rgba() 색상 함수를 사용해서 투명도를 지닌 그림자 요소들이 겹치면서 자연스러운 그림자 효과를 만들어 내도록 표현했습니다.

letterpress 효과

레터프레스 효과는 두꺼운 종이나 가죽 등에 도장을 찍듯이 배경에 글자를 가볍게 눌러서 찍은 듯한 느낌을 주는 스타일입니다.

CSS3 text-shadow 를 이용하여 이 스타일을 구현해 보도록 하겠습니다.

이 효과를 만들기 위해서는 글자에 사용될 진한 색, 배경에 쓰일 중간 색, 그리고 그림자 역할을 할 좀 더 연한 색과 진한 색 등 네 가지톤의 색상이 필요합니다.

그리고 나서 다중 음영 값을 적용한 text-shadow 문법을 적용하면 됩니다.

See the Pen PzLOGO by jaeheekim (@jaehee) on CodePen.

Related Info

1. CSS3 box-shadow

Jaehee's WebClub