Study/CSS3

[CSS3] text-shadow

taecongs 2023. 9. 5. 11:06

알고있으면 좋은 CSS3 Tip✨


text-shadow

  • text-shadow는 글자에 그림자 효과를 주는 속성이다.
  • text-shadow 와 box-shadow는 비슷하게 작성하기 때문에 자주 사용하지는 않지만 알아두면 좋다.
// (1) text-shadow 속성
text-shadow : x축 y축 blur color;


// (2) text-shadow 예제
text-shadow : 5px -5px 0 #e00012;    // 글자 오른쪽과 위쪽에 빨강색 그림자넣기
text-shadow : -3px 3px 0 #e00012;    // 글자 왼쪽과 아래쪽에 빨강색 그림자 넣기
  • x축 : 왼쪽(음수)과 오른쪽(양수)에 그림자 효과를 적용한다. 
  • y축 : 위쪽(음수)과 아래쪽(양수)에 그림자 효과를 적용한다.
  • blur : 그림자에 번짐 효과를 주며, 크기가 커질수록 흐릿하게 번짐효과가 적용된다.
  • color : 그림자에 색을 부여한다.