[HTML/CSS] 텍스트에 그림자 넣기 (text-shadow)

 

CSS에서 텍스트에 그림자 효과를 주기 위해서는

text-shadow 속성을 사용합니다.

 

 

text-shadow

text-shadow: 3px 4px 5px red;

 

  속성값  

• offset-x, offset-y (필수)
  • 그림자의 위치를 지정합니다.
  • offset-x : 양수이면 글자의 오른쪽에, 음수이면 글자의 왼쪽에 그림자가 나타납니다.
  • offset-y : 양수이면 글자의 아래쪽에, 음수이면 글자의 위쪽에 그림자가 나타납니다.
• blur-radius
  • 숫자가 커질수록, 그림자가 흐릿해집니다.
• color
  • 그림자의 색깔을 지정합니다.

 

 

 

텍스트에 그림자 효과 주기 예제

<div class='ex01'>ex01</div>
<div class='ex02'>ex02</div>
<div class='ex03'>ex03</div>

.ex01 {
  text-shadow: 5px 5px gray;
}

.ex02 {
  text-shadow: 5px 5px 4px rgb(0, 255, 0);
}

.ex03 {
  text-shadow: 0px 0px 10px red;
}

div {
  font-size: 30px;
  font-weight: bold;
  margin-top: 10px;
}

text-shadow: 5px 5px gray;

글자의 오른쪽으로 5px, 아래쪽으로 5px 위치에 회색 그림자가 있습니다.

 

text-shadow: 5px 5px 4px rgb(0, 255, 0);

글자의 오른쪽으로 5px, 아래쪽으로 5px 위치에, 4px 크기의 블러처리가 된 초록색 그림자가 있습니다.

 

text-shadow: 0px 0px 10px red;

offset-x와, offset-y를 모두 0px로 지정하였습니다. 

그러면 그림자는 글자 바로 뒤에 생성됩니다.

그러면, 그림자는 사실 보이지 않게 되겠죠?

여기에, blur-radius 값을 10px을 주어서,

글자 주위에 그림자가 번지도록 하였습니다.