CSS3으로 멋진 타이포그래피 만들려면?

CSS(Cascading Style Sheet)는 인터넷 프로그래밍 언어 중 하나로 레이아웃이나 스타일을 정의할 때 자유도가 높습니다. CSS3를 활용해 타이포그래피를 삽입하는 방법을 소개하려고 합니다. 테이블 태그 또는 이미지를 사용하지 않고 CSS3를 이용하여 박스를 구현하고 그러데이션 효과와 그림자 효과를 표현하고 입체적인 타이포그래피를 구현하는 방법입니다.

CSS3 정의
#insetBgd {
  width: 500px;
  height: 100px;
  background: -moz-linear-gradient(-90deg,#003471,#448CCB);
  background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}
h1.insetType {
  padding-left: 50px; /* The padding is just there to move the h1 element to the center of the div */
  padding-top: 17px;
  font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
  font-size: 40px;
  color: #0D4383;
  text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}

HTML 구문 작성
Typography Design

CSS3 적용 결과

 
참고로 본 예제는 파이어폭스 3.6, 사파리 4.0 이상에서 직접 확인할 수 있으며 IE8.0에서 CSS3이 구현되지 않아 확인이 불가하기에 첨부이미지로 실 적용효과를 대체합니다.

김현욱 버즈리포터 | 2010-09-28
더 보기 http://www.ebuzz.co.kr/content/buzz_view.html?uid=86233#ixzz10xj2rrLV