【jQuery】ネオン管が光っているようなテキストNeon Text Generator

Neon Text Generatorはテキストをネオン管が光っているような美しい色にしてくれるjQueryプラグイン。

JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="neon_text.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*Стандартны параметры*/
$('.first_neon').neonText();
/*С настройкой*/
$('.second_neon').neonText({
textColor:'white',
textSize:'40pt',
neonHighlight:'white',
neonHighlightColor:'#008000',
neonHighlightHover:'#FFFF00',
neonFontHover:'white'
});
$('.third_neon').neonText({
textColor:'white',
textSize:'40pt',
neonHighlight:'white',
neonHighlightColor:'#00FFFF',
neonHighlightHover:'#7FFF00',
neonFontHover:'white'
});
});
</script>

HTML

<div class="first_neon">Enjoy NEON</div>
<div class="second_neon">Enjoy NEON</div>
<div class="third_neon">Enjoy NEON</div>

CSS

テキストシャドウはCSS

.first_neon {
background: none repeat scroll 0 0 #000000;
border: 1px solid;
border-radius: 15px;
color: #FFFFFF;
cursor: pointer;
float: left;
font-family:"Warnes";
margin: auto;
padding: 26px 10px;
text-align: center;
text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FF00DE, 0 0 70px #FF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE;
transition: text-shadow 0.5s ease 0s;
width: 250px;
}
.first_neon:hover {
text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #00FFFF, 0 0 70px #00FFFF, 0 0 80px #00FFFF, 0 0 100px #00FFFF;
}

MITライセンス

 
Neon Text

【jQuery】ネオン管が光っているようなテキストNeon Text Generator

  • LATEST
  • RELATED
  • POPULAR