CSS로 만드는 입체 텍스트 효과

알고 쓰면 별거 아니지만, 일일이 코딩하려면 잔손이 꽤나 많이 가는 CSS 입체 효과입니다.

3번째 텍스트 효과는 배경색이 어느정도 있어야 입체 효과가 나기 때문에 

배경색이 없는데는 사용하는것을 추천하지 않습니다.

복사해서 블로그 제목 등에 사용하면 됩니다.

.longshadow {  color: #131313;  text-shadow:     1px -1px 0 #787878,     -1px 1px 1px #808080,     -2px 2px 1px #888888,     -3px 3px 1px #909090,     -4px 4px 1px #989898,     -5px 5px 1px #a0a0a0,     -6px 6px 1px #a8a8a8,     -7px 7px 1px #b0b0b0,     -8px 8px 1px #b8b8b8,     -9px 9px 1px #c0c0c0,     -10px 10px 1px #c8c8c8,     -11px 11px 1px #d0d0d0,     -12px 12px 1px #d8d8d8,     -13px 13px 1px #e0e0e0,     -14px 14px 1px #e8e8e8,     -15px 15px 1px #ffffff}.deepshadow {  color: #fff;  text-shadow:     0 -1px 0 #ddd,     0 1px 0 #2e2e2e,     0 2px 0 #2c2c2c,     0 3px 0 #2a2a2a,     0 4px 0 #282828,     0 5px 0 #262626,     0 6px 0 #242424,     0 7px 0 #222,     0 8px 0 #202020,     0 9px 0 #1e1e1e,     0 10px 0 #1c1c1c,     0 11px 0 #1a1a1a,     0 12px 0 #181818,     0 13px 0 #161616,     0 14px 0 #141414,     0 15px 0 #121212,     0 18px 40px rgba(0, 0, 0, 1);  }.papershadow {  color: #444;  background-color:#888;  text-shadow:     -1px -1px 1px #000,     2px 2px 1px #c0c0c0;}.retroshadow {  color: #2c2c2c;  text-shadow:     3px 3px 0px #fff,     6px 6px 0px rgba(0, 0, 0, 0.3);}

적용하면 아래처럼 텍스트 효과가 나타납니다.

위에서 부터 longshadow, deepshadow, papershadow, retroshadow 를 적용한 것입니다.