타입엔진 소스

네온 텍스트

작성자
작성일
2013-07-03
컨셉
text-shadow와 blur를 이용한 네온효과입니다.
어두운 배경에 blur값을 크게 설정하면 예제와 같은 효과를 구현하실 수 있습니다.

IE(9이하)는 FILTER:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false, ShadowOpacity=0.5); 를 적용하였고,
그외 브라우져에서는 text-shadow: 0 0 10px #85dfff, 0 0 15px #85dfff;를 적용하였습니다.

아래에 공개된 소스코드에서 확인해보세요~

- 사용된 폰트 : HY새벽4시M
소스
<!-- 스타일 -->
<style>
.src_space {
	position:relative; 
	background:url("/images/src/bg_space.gif"); 
	width:630px; 
	height:270px; 
	padding:180px 0px 0px 120px;
	z-index:-1 !important;
	overflow:hidden;
}
.src_space div {
	position:relative;
	float:left;
	color:#ffffff;
	font-size:44px;
	margin-right:10px;
	line-height:100px;
	height:100px;
}
.src_space div#brown {
	margin-right:0px;
	font-size:80px;
}
.src_space .neon_blue {
	text-shadow: 0 0 10px #85dfff, 0 0 15px #85dfff;
}
.src_space .neon_brown {
	text-shadow: 0 0 10px #ffbc85, 0 0 15px #ffbc85; 
}
.neon_blue_ie {
	z-index:-1; 
	position:absolute; 
	top:-10px;
	left:-10px;
	FILTER:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false, ShadowOpacity=0.5); 
	color:rgb(133,223,255);
}
.neon_brown_ie {
	z-index:-1;
	position:absolute;
	top:-15px;
	left:-15px;
	margin-right:0px;
	font-size:80px; 
	FILTER:progid:DXImageTransform.Microsoft.Blur(PixelRadius=15, MakeShadow=false, ShadowOpacity=0.5); 
	color:rgb(255,188,133);
}
</style>


<!-- 웹폰트 스크립트 --> 
<STYLE>
@font-face{font-family:"wHY4OclockM"; src: url("http://load.typeengine.co.kr/?subset");}
div {font-family:"wHY4OclockM";}
</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_space">
	<div id="blue">웹폰트..</div>
	<div id="brown">화려함</div>
	<div id="blue">을 입다!</div>
</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 standard = true;

	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)
			standard = false;
	}
	
	if ( !standard ){
		$.each($(".src_space div"), function(){
			var id = $(this).attr("id"),
				text = $(this).text(),
				html = text +
					'<span class="neon_' + id + '_ie">' + text + '</span>' +
					'<span class="neon_' + id + '_ie">' + text + '</span>';
			$(this).html(html);
		});
	}
	else{
		$.each($(".src_space div"), function(){
			var id = $(this).attr("id");
			$(this).addClass("neon_" + id);
		});
	}
};

$(document).ready(function(){
	setTimeout(function(){setTxt()}, 1000);
});
</script>
목록
덧글
이름
비밀번호
0 / 250자
작성
띠용
와~ 네온이 정말 화려하네요 덧글삭제
2013-04-29
**
예뻐요 :) 덧글삭제
2013-04-04
  • 1

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

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