Normally, to get a text shadow effect onto a website, we’d look to use one of our favorite image altering design programs. Now, we don’t need to look further. The power of CSS3 provides us with some great looking text-shadow effect. Here’s an example of what it looks like:
Pretty cool right? This is accomplished with very little CSS, and can really add some pizazz to your site when used properly. Here’s how the text-shadow property is used in your CSS file:
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
text-shadow: #999 2px 2px 2px;
Super simple right?
As you can see, the text-shadow property takes four values:
- First, the color that you would like the text-shadow to be.
- Next up is the x-coordinate of where you’d like the shadow to be relative to the text. Remember that the x-axis is horizontal, and the property moves from the center to the right. Therefore, our text-shadow will be offset 2px to the right of our initial text.
- Logically, the next value is the y-coordinate of where you’d like the text-shadow to be, once again relative to the initial text. The y-axis is vertical, and positive numbers will move the text down.
- The last value is the amount of blur, in pixels, that you’d like to add to the text-shadow. You can think of this as how many pixels you’d like to “stretch” the shadow text. Keep this value low, because if you set it too high, you’ll see that the text can quickly become illegible.
With CSS3, adding special typography effects is a breeze, and with the right usage can really make the text on your website stand out. Be smart about the placement of text-shadow, and try to keep it away from extremely important text on your webpage such as full stories and articles. The text-shadow is better left for better looking headers or titles.
That’s all for text-shadows; a super easy, fast, and good looking effect. Until next time!
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!
