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

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

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

CSS text-shadow 그림자 효과

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

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

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

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

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

그림자 기능을 응용하여 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>

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

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

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