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.
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.
font-family: 'Junge', cursive;
/* CSS Transition */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
text-shadow: 40px 0px 0px #92AE57, 80px 0px 0px #00aae9,
-40px 0px 0px #92AE57, -80px 0px 0px #00aae9;
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;
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;
And finally we will have the Live demo page for this markup. Hurrey!!!!