One note to keep in mind is that without CSS3 and Javascript, HTML5 is just normal/traditional HTML. We can not do much more except placing new kind of input types.

Few days back I was playing with the CSS3 properties and I came out with a nice text effect using the Text shadow property. Yes I have used only CSS to make this effect happen. I have used CSS Text Shadow and Transition properties for the same.

I will pass you throught the all phases like HTML markup, CSS code and Live Demo. So let’s digg into this.

HTML Markup

I have just used h1 tags for this, you can use any tag you want, You just need to make few alteration in your css code accordingly.

[cc lang=”html”]

[/cc]

CSS Code

[cc lang=”css”]
h1
{
font-family: ‘Junge’, cursive;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
/* CSS Transition */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
color: #8D3737;
}

h1.first:hover
{
text-shadow: 40px 0px 0px #92AE57, 80px 0px 0px #00aae9,
-40px 0px 0px #92AE57, -80px 0px 0px #00aae9;
}

h1.second:hover
{
text-shadow: 40px 0px 0px #00aae9, 80px 0px 0px #92AE57,
-40px 0px 0px #00aae9, -80px 0px 0px #92AE57, 0px 50px 0px #00aae9,
0px 100px 0px #FFE13B, 0px -50px 0px #00aae9, 0px -100px 0px #92AE57;
}

h1.third:hover
{
text-shadow: 40px 30px 0px #92AE57, 80px 60px 0px #FFE13B,
-40px -30px 0px #393A39, -80px -60px 0px #00aae9,
40px -30px 0px #92AE57, 80px -60px 0px #00aae9,
-40px 30px 0px #393A39, -80px 60px 0px #FFE13B;
}
[/cc]

And finally we will have the Live demo page for this markup. Hurrey!!!!

Live Demo

Playing with CSS3 Text Shadow

Do consider to share this article if you like my work on this. Subscribe to our RSS Feed to Keep yourself updated. Like us on Facebook and Follow us on Twitter.