Playing with CSS Text Shadow

  • Avinash
  • 0
  • Jun 06, 2012
  • Web Development

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.

F

A

F

<div class="span4">
  <h1 class="first">F</h1>
</div>
<div class="span4">
  <h1 class="second">A</h1>
</div>
<div class="span4">
  <h1 class="third">F</h1>
</div>

CSS Code

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; }
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;
}

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.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by: