Husky Ninja Blogs

Two More Text Effects Using CSS3

In addition to the 3D CSS text effect in the hero there are two other CSS effects applied to the title; neon glow (which is a commonly known CSS effect) and stroke. Each one of these are based on others works with a slight twist. First, the neon glow.

Neon glow only appears as the header between 480px and 768px, and is created by taking a narrow sans serif text, in this case Karolina Lach's Pompiere hosted on Google Font. The color is set to white, and a dramatically increasing blur-radius in a text-shadow that becomes a light green color.

.nbone, .nbtwo, .nbthree, .nbfour, .nbfive, .nbsix, .nbseven, .nbeight, .nbnine, .nbten, .nbeleven, .nbtwelve, .nbthirteen, .nbfourteen, .nbfifteen {
	font-family: 'Pompiere', Arial, Sans-serif;
	text-shadow:
		0 0 5px #fff,
		0 0 10px #fff,
		0 0 15px #fff,
		0 0 20px #2dff95,
		0 0 30px #2dff95,
		0 0 40px #2dff95,
		0 0 50px #2dff95,
		0 0 75px #2dff95;
}

Keep in mind that the need for so many class names stems from the title breakdown using SPAN for the 3D effect.

In addition to the neon glow, there is a webkit only box-reflect applied to the containing block element, H1. I normally shy away from non-cross browser compliant style elements (with some exceptions for IE, 'cause screw IE), but this downgrades to nothing without effecting the neon glow, so I figured what the heck. With a background image of a wet city street at night I thought the slight refection added to the integration of the text with the background image. I also added a pseudo-class :after to the title to include the Husky Ninja logo.

Here is the entire CSS:

.nbone, .nbtwo, .nbthree, .nbfour, .nbfive, .nbsix, .nbseven, .nbeight, .nbnine, .nbten, .nbeleven, .nbtwelve, .nbthirteen, .nbfourteen, .nbfifteen {
	font-family: 'Pompiere', Arial, Sans-serif;
	text-shadow:
		0 0 5px #fff,
		0 0 10px #fff,
		0 0 15px #fff,
		0 0 20px #2dff95,
		0 0 30px #2dff95,
		0 0 40px #2dff95,
		0 0 50px #2dff95,
		0 0 75px #2dff95;
}

h1.title{
	font-size: 5em;
	letter-spacing: 2px;
	padding-left: 10px;
	padding-top: 5px;
	color: #fff;	
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
}

h1.title:after{
	content: "  ";
	background: url(../images/logo_main_sm.png);
        color: #fff;
        position: relative;
        display: inline-block;
        height: 35px;
        width: 30px;
}

The second effect was inspired by Joshua Johnson on Design Shack, and is an attempt to roughly replicate the Double Stroke Text, which in his example is more or less completely limited to webkit. Despite my love for webkit (and my distaste for IE) I could not rightly apply this effect as there would be no acceptable fallback. Yet I really loiked the effect. So I punted.

The title is created using a script font, Vernon Adam's Pacifico hosted on Google Fonts. Pacifico was not only the perfect font in this case, it is also my favourite Mexican beer. The effect is only visible below 480px. I set the color of the font to the darkest background-color I could quickly find, and the applied a text-shadow alternating around the text as to create a stroke, starting in black but finishing up with a close match to the background's color.

Here is the CSS. Keep in mind the SPAN split font and the 3D effect.

.nbone, .nbtwo, .nbthree, .nbfour, .nbfive, .nbsix, .nbseven, .nbeight, .nbnine, .nbten, .nbeleven, .nbtwelve, .nbthirteen, .nbfourteen, .nbfifteen {
	font-family: 'Pacifico', Arial, Sans-serif;
	text-shadow:
		-1px -1px 1px #000,
		1px 1px 1px #000,
		-2px 2px 0px #000,
		2px -2px 0px #000,
		-3px 3px 0px #068282,
		3px -3px 0px #068282;
}

h1.title{
	font-size: 2.5em;
	color: #c2e2dd;
	padding-left: 10px;
	padding-top: 10px;
	white-space: nowrap;
	letter-spacing: normal;
}

h1.title:after{
	content: "  ";
	background: url(../images/logo_main_sm.png);
        color: #fff;
        position: relative;
        display: block;
	left: 10px;
	top: 8px;
        height: 35px;
        width: 30px;
}

Again, the pseudo-class :after was used to attach the Husky Ninja logo.

With the completion of the hero titles, the site style was basically done, and it was time to move on to the deployment and configuration of the modules.