Cool Text Effects Using CSS3 Text-Shadow

March 2, 2011 in Design, Tutorials

 

Lately there has been a great amount of websites that have started incorporating CSS3; Many of which have used some kind of text effects such as text shadows. While text shadows have been around for quite some time, it has recently become so much easier to implement because of modern browsers.

Here, I’ll show you how to create some really cool and inspiring text effects using text shadows in CSS3. But before I get into the actual meat and potatos of the CSS code, I’ll tell you first how the code works.

Text shadows are pretty easy to implement. Here is an example of the code:

h1 {
    text-shadow: 3px 5px 10px #000;
}

As you can see, I am applying the text-shadow property to the header H1 tag. Also, the text-shadow property has four values. The first value (3px) is the X-coordinate, the second value (5px) is the Y-coordinate, the third value (10px) is the blur radius, and the last value (#000) is the text-shadow color in hex code. Here’s an easier diagram that shows which property is which.

Now that I’ve shown you how to implement text-shadow to various text elements on your website, I’ll show you some cool text effects that you can do using various methods of the text-shadow property.

---

INSET

Inset is the most commonly used text effect used in CSS3 today. Inset text effect gives the impression of the letters to look like it is pressed in to the background. It only requires two variations of the text-shadow property where the Y-coordinate value is changed to give the illusion of an inset text. This works best if the background is a lighter color than the actual text color. It also works vice versa for pages with darker backgrounds and lighter text. Just modify the text-shadow color value to a different value as needed. Also, if you look at the code below, you’ll notice that the third value (blur radius) of the first text-shadow property is given a value of 0. I do this to create a inner shadow effect on the text which helps to distinguish a more prominent inset look.

h1 {
     text-shadow: 0px -2px 0px #333,
                  0px 2px 3px #666;
}

---

3D Text

The 3D text effect uses various layers of text-shadow to create a raised look. In this example, I’ll be using a white-colored text while varying the X-coordinate numerous times creates the desired effect.

h1 {
      text-shadow: 0 1px 0 #bbb,
                   0 2px 0 #bbb,
                   0 3px 0 #aaa,
                   0 4px 0 #aaa,
                   0 5px 0 #999,
                   0 6px 1px #000,
                   0 0px 3px #000,
                   0 1px 3px #000,
                   0 3px 5px #000,
	           0 5px 10px #000,
	           0 5px 20px #000;
}

---

Neon Lights

The Neon Lights text effect uses various layers of text-shadow to create a glow on the outside of the text. By varying the blur radius numerous times, you can create the illusion of neon text. In this example, I’ll be using a light green-colored text as the base and will be applying numerous layers of text-shadow while changing the blur radius to achieve the desired effect.

h1 {
      text-shadow: 0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #ff00de,
                   0 0 70px #ff00de,
                   0 0 80px #ff00de,
                   0 0 100px #ff00de,
                   0 0 150px #ff00de;
}

---

As you can see, it’s quite easy to implement various types of text-shadow to create some cool text effects. You can also try using those same text effects on different types of fonts using the @font-face rule as well.

Tags: 3d, Cool, CSS, css3, Effect, Effects, inset, Inspiring, neon, shadow, shadows, Text, Using