Cool Text Effects Using CSS3 Text-Shadow
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:
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 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.
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.
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.
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.