태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

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

분류: Design Information/HTML5 and CSS3 작성일: 2010.03.22 00:44 Editor: 마루[maru]

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


저작자 표시 비영리 변경 금지
신고
※글에 대한 여러분 의견을 남겨 주십시오. 감사합니다!
  1. Favicon of http://hfkais.blogspot.com BlogIcon H.F.Kais 2010.03.22 01:04 신고  댓글주소  수정/삭제  댓글 남기기

    예전엔 포토샵에서 이미지로 만들었던 것을 이제는 CSS3에서 몇 줄의 코딩만으로 만들 수 있게 되었네요. 그럼 이제 새로운 속성들을 또 외워야 하나 ㅠㅠ

  2. Favicon of http://monomato.com BlogIcon 모노마토 2010.03.22 02:07 신고  댓글주소  수정/삭제  댓글 남기기

    background: -moz-linear-gradient(-90deg,#003471,#448CCB);
    는 파폭용이고
    background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
    는 사파리나 크롬용이군요.
    CSS3가 아직 완벽하게 정리되지않은 느낌입니다


우드스