css3 활용 타이포그래피 삽입 방법

CSS3를 활용, 타이포그래피 삽입 방법을 설명하려고 합니다.

테이블 태그 또는 이미지를 사용하지 않고 css3를 이용하여 박스를 구현하고, 그라데이션 효과와 그림자 효과를 표현하고 입체적인 타이포그래피를 구현하는 방법은 아래와 같습니다.

css3 활용, 타이포그래피 삽입 결과

참고로 본 예제는 Firefox3.6, Safari 4.0 이상에서 직접 확인할 수 있으며, IE8.0에서 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 구문 작성

<div id="insetBgd">
    <h1 class="insetType">Typography Design</h1>
</div>

CSS3 적용 결과

Typography Design