css 불타는 글자 효과

Front-end/CSS

mooyou 2022. 2. 10. 14:43

728x90

SMALL

지난 포스팅에서 text-shadow 클래스에 대해서 알아봤습니다.

text-shadow 사용법

text-shadow 글자에 그림자를 적용시킬 수 있는 효과 text-shadow:none|<수평거리><수직거리><번짐정도><색상> 수평거리 : 양수값은 글자 오른쪽, 음수값은 글자 왼쪽으로 그림자의 수평 거리를 정함 수직

moo-you.tistory.com

이번에는 이 text-shadow css를 사용해서 글자에 불타는 효과를 주도록 하겠습니다.

html

<div class="wrap">
   <div class="txt">Lorem ipsum dolor</div>
</div>

css

.txt {text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20;}

※ 배경을 검정으로 해야 불타는 효과가 잘 보입니다.

728x90

LIST