text-shadow css를 이용하여 텍스트에 그림자 효과를 줄수 있습니다.
text-shadow: x축값, y축값, 번짐정도, 색상값;
예시)
text-shadow: 2px 2px 5px red;
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
위 예시와 같이 그림자를 출력할 수 있으며, 두개 이상의 그림자도 생성 가능합니다.
두개 이상의 값을 적용하면 아래와 같이 겹쳐보이는 글자를 만들어볼 수 있습니다.
* 첨부된 사이트를 참고하시면 자세한 소스를 확인하실 수 있습니다.
text-shadow:
5px 5px 0px #eb452b,
10px 10px 0px #efa032,
15px 15px 0px #46b59b,
20px 20px 0px #017e7f,
25px 25px 0px #052939,
30px 30px 0px #c11a2b,
35px 35px 0px #c11a2b,
40px 40px 0px #c11a2b,
45px 45px 0px #c11a2b;
적용된 text-shadow를 이용하여 다른곳에 바로 적용해보시면
아래와 같이 출력되는 것을 확인하실 수 있습니다.
|
