콘텐츠로 건너뛰기

CSS 글자 꾸미기 – 그림자, 테두리 효과 적용하기 text-shadow

CSS text-shadow 속성을 이용하여 글에 그림자 효과를 부여할 수 있는데, 기본적인 그림자와 이를 응용한 테두리 효과를 표현할 수 있습니다.

text-shadow: offset-x offset-y blur-radius color

CSS text-shadow 그림자 효과

속성 적용 방법은 가로, 세로, 번짐, 색상으로 가로, 세로 설정을 필수적으로 값을 입력해야 하고 번짐 효과는 0으로 설정되며 색상은 상속을 받게 됩니다.

text-shadow:1px 1px 5px #bdbdbd

그림자 효과 속성 값으로 적용한 결과 물인데 그림자 효과를 가장 이상적으로 적용한 결과가 아닌가 합니다.

text-shadow:1px 1px 0px #f40

text-shadow:1px 1px 3px #f40

text-shadow:1px 1px 10px #f40

text-shadow:1px 1px 0px #f40
text-shadow:1px 1px 3px #f40
text-shadow:1px 1px 10px #f40

blur-radius 값을 낮게 입력하면 범위가 좁으면서 아주 진해지고 수치가 높을수록 범위는 넓어지며 연해 지게 됩니다. 입력값은 0~10px입니다.

text-shadow:5px 5px 0px #bdbdbd

text-shadow:5px 5px 0px #bdbdbd

X, Y 값은 대상과의 거리로 입력값이 커질수록 대상과 멀어지게 됩니다. 수치에 따라 X는 오른쪽 Y는 왼쪽으로 이동을 하며 마이너스 값을 주게 되면 반대로 왼쪽과 위로 이동하게 됩니다.

text-shadow:1px 5px 2px #ff0000,1px 10px 2px #0100ff

text-shadow:1px 5px 2px #ff0000,1px 10px 2px #0100ff

쉼표를 이용하여 중복 적용하는 것도 가능합니다. 모든 옵션을 다르게 변경 적용이 가능하고 거리 값은 두 번째 값이라도 대상으로부터 0의 값에서 시작하게 됩니다.

text-shadow:0px 0px 1px #000

text-shadow:0px 0px 1px #f40

text-shadow:0px 0px 1px #0100ff

text-shadow:0px 0px 1px #000
text-shadow:0px 0px 1px #f40
text-shadow:0px 0px 1px #0100ff

그림자 기능을 응용하여 X, Y 값을 0으로 하고 번짐을 1px 정도로 하여 테두리 효과를 만들기도 가능한데, 한 번의 효과로는 식별이 힘들므로 중복하여 여러 번의 속성을 부여하여 진하게 만들어 줍니다.

“나 보기가 역겨워
가실 때에는
말없이 고이 보내드리우리다”
text-shadow:-1px 0px 0px #000,1px 0px 0px #000,0px -1px 0px #000,0px 1px 0px #000

상하좌우 4번에 걸쳐 효과를 적용해 줌으로써 보다 진하게 적용이 가능하여 보다 높은 가독성을 보여줍니다.

<div class="text-shadow"> text-shadow </div>
<style>
  .text-shadow { 
    text-shadow:-1px 0px #0100ff,1px 0px #0100ff,0px -1px #0100ff,0px 1px #0100ff;
    color:#fff 
  }
</style>
text-shadow

진하게 표현하기 위해 번짐 효과는 0으로 하는데 기본값이 ‘0’ 이기 때문에 생략을 하여도 무방합니다.


CSS 텍스트 첫글, 첫줄 강조하기

블로그나 사이트를 운영하면서 제목이나 본문의 첫 글자 또는 첫 줄에 별도의 속성을 부여하여 강조나 디자인적인 효과를 낼 수 있는데요. 웹문서를 작성하면서 해당 문서의 글 색상, 크기 등의 설정을 변경하여 문서 특성을 살릴 수도 있지만 CSS 적용하여 일괄적으로 효과 적용이 가능합니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다