MYWIZZBLOG

CSS Shadow

2006-03-23 17:00:10
talks 페이지 상단에 사용된 텍스트를 자세히 보시면 흰색 그림자가 들어가 있습니다.
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>