타입엔진 소스

입체효과

작성자
작성일
2013-07-03
컨셉
css3의 속성 중에 하나인 text-Shadow를 입체효과를 구현하였습니다.
css3를 지원하지 않는 브라우져(IE9이하)에서는 text-Shadow를 사용하실 수 없기 때문에, 사용자정의 함수(setTxt)에서 입체효과를 구현했습니다.
아래에 공개된 소스를 확인해보세요.

이 소스는 공개된 소스입니다. 여러분의 사이트에서 웹폰트와 폰트이펙트를 확인해보세요~
-사용된 웹폰트 : HY고딕950
소스
<!-- 스타일 -->
<style>
.src_taja { 
	width:750px;
	height:500px;
	background:url('/images/src/bg_taja2.png'); 
}
.src_taja .maincopy {
	position:relative; 
	clear:both; 
	float:left; 
	width:580px;
	font-size:100px; 
	margin:180px 0px 0px 170px;
	color:#8e9394; 
	text-shadow:1px 1px 1px #414445,  -1px -1px 1px #c3c6c8;
}
.src_taja div div {position:absolute;}

.src_taja .sh_text {
	color:#8e9394; 
}
.src_taja .sh_highlight {
	top:-1px;
	left:-1px; 
	color:#c3c6c8; 
}
.src_taja .sh_bg {
	top:1px; 
	left:1px; 
	color:#414445; 
}

.src_taja .link {
	position:absolute;
	width:400px;
	top:450px;
	left:330px;
	text-align:right;
	color:#222;
	font-size:12px;
	line-height:14px;
}
</style>


<!-- 웹폰트 스크립트 --> 
<STYLE>
@font-face {font-family:"wHYGothic950"; src: url("http://load.typeengine.co.kr/?subset");}
.maincopy {font-family:"wHYGothic950";}
</STYLE>
<SCRIPT id="TypeEngine" type="text/javascript" src="http://www.typeengine.co.kr/js/hy-1.1.js?client_c=7777777777"></SCRIPT>


<!-- 본문 -->
<div class="src_taja">
	<div class="maincopy">입체효과</div>
	<a href="http://www.typeengine.co.kr/" target="_typeengine"><p class="link">이 콘텐츠는 TYPE ENGINE 웹폰트 서비스를 이용하여 구성하였습니다.<br/>▶ TYPE ENGINE 서비스 바로가기</p></a>
</div>


<!-- 텍스트 효과 스크립트 --> 
<script type="text/javascript" src="http://www.typeengine.co.kr/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var setTxt = function(){
	var text = $(".maincopy" ).text();
	var html = '<div class="sh_highlight">' + text + '</div>';
	html += '<div class="sh_bg">' + text + '</div>' ;
	html += '<div class="sh_text">' + text + '</div>' ;
	$(".maincopy" ).html(html);
};

$(document).ready(function(){
	if (navigator.appName == 'Microsoft Internet Explorer'){
		var Reg  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{1,}).([0-9]{1,})");
		if (Reg.exec(navigator.userAgent) == null)
			setTxt();
	}
	
});
</script>
목록
덧글
이름
비밀번호
0 / 250자
작성

이 글을 삭제하시겠습니까?
비밀번호를 입력해주세요.

확인
취소
알려드립니다!
서비스 사양이 변경될 경우, 타입엔진소스에서 배포한 코드의 사용이 종료되어 웹폰트가 보이지 않을 수 있습니다.