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
'Design Trend > 영상' 카테고리의 다른 글
3개의 비젼,미래의 책 (0) | 2010.09.30 |
---|---|
미래 GUI는 어떻게 진화할 것인가? (0) | 2010.09.30 |
애니메이션 거장, 지브리의 숨결! 니노쿠니 영상 (0) | 2010.09.25 |
5년간 만든 애니메이션을 무료로 공개했다고? (2) | 2010.09.25 |
디자인·속도 확 달라진 IE9 (0) | 2010.09.20 |