CSS Shadow
2006-03-23 17:00:10
talks 페이지 상단에 사용된 텍스트를 자세히 보시면 흰색 그림자가 들어가 있습니다.
CSS로 처리한 것인데요,
filter를 쓰면 간단하게 그림자를 넣을 수 있겠지만 브라우져 문제도 있고
또, 실제로 생각한 것만큼 이쁘게 그림자가 만들어 지지 않습니다.
해서, HTML 코드 상에서 그림자 처리할 텍스트를 두번 써야하는 것을 참으실 수 있다면 CSS를 이용하여 그림자를 넣는 것도 나쁘지 않습니다 :)
아래 링크는 샘플이며, 소스 보기를 하시면 CSS를 보실 수 있습니다.
css_shadowed.html
CodeHighlighter 붙인 기념으로 소스를 잠깐 올려봅니다 :)
아래는 CSS
아래는 HTML
CSS로 처리한 것인데요,
filter를 쓰면 간단하게 그림자를 넣을 수 있겠지만 브라우져 문제도 있고
또, 실제로 생각한 것만큼 이쁘게 그림자가 만들어 지지 않습니다.
해서, HTML 코드 상에서 그림자 처리할 텍스트를 두번 써야하는 것을 참으실 수 있다면 CSS를 이용하여 그림자를 넣는 것도 나쁘지 않습니다 :)
아래 링크는 샘플이며, 소스 보기를 하시면 CSS를 보실 수 있습니다.
css_shadowed.html
CodeHighlighter 붙인 기념으로 소스를 잠깐 올려봅니다 :)
아래는 CSS
.shadow_back
{
font:italic 70pt georgia,helvetica,sans-serif;
position:relative;
z-index:0;
color:#bbb
}
.shadow_fore
{
position:absolute;
left:-2px;
top:-2px;
font:italic 70pt georgia,helvetica,sans-serif;
color:#fff
}
아래는 HTML
<span class="shadow_back">Shadowed Text
<span class="shadow_fore">Shadowed Text</span>
</span>