CSS

【CSS】ネオンライトテキスト効果CSS Neon Light Text Effects

September 22, 2017
CSS Neon Light Text Effects

CSS Neon Light Text EffectsはCSSのネオンライトテキスト効果

HTML

<h1 class="neon" data-text=" # HAPPY BDAY"> # HAPPY BDAY</h1>
.neon {
	position: absolute;
	text-align: center;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding:  0 20px;
	font-size: 4em;
	color: #fff;
	text-shadow: 0 0 20px #00aced;
}
.neon:after {
	content: attr(data-text);
	position: absolute;
	z-index: -1;
	color: #00aced;
	top: 0;
	left: 0;
	margin: 0;
	padding:  0 20px;
	filter: blur(15px); 
}
.neon:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #1dcaff;
	z-index: -2;
	opacity: .5;
	filter: blur(80px);
}