[해피CGI][cgimall] 그림자를 이용하여 겹쳐있는 글자 만들기

ext-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를 이용하여 다른곳에 바로 적용해보시면
아래와 같이 출력되는 것을 확인하실 수 있습니다.