CSS3 Text Effects that you can use in your Blogger blog posts: Deliver your killer expressions/phrases in style?

CSS3 has been around for a very long time and popular browsers such as Chrome, Firefox and Safari had already shown more and more support for CSS3 in the recent years but unfortunately bloggers especially those using Blogger have failed to capitalize on CSS3’s delightful effects.

Perhaps they were ignorant, they were probably thinking that CSS3 is a toy designed only for the designers but the truth is CSS3 is really quite easy to understand and anybody with a little amount of creativity and CSS knowledge can play around with it.

Let’s take a look at some simple, delightful CSS3 text effects that we can apply straight on our blog posts.

Note: In order to apply the examples given below on your existing posts, just edit your post with Blogger Post Editor, locate your killer expression/phrase and wrap it with the given inline CSS (there are other better ways to do it but this one is by far the easiest). Don’t forget to hit the preview button and see how it looks before publishing. Feel free to modify the values of each CSS property. Play around with it!

CSS3 Text-Effect: Anger?

I wanna kick some ass!

<span style='font-size: 30px; text-shadow: rgb(255, 0, 0) 2px 2px 0px, rgb(242, 68, 5) 0px 0px 0px, rgb(242, 116, 5) 0px -5px 4px, rgb(242, 159, 5) 2px -10px 6px, rgb(242, 226, 5) -2px -15px 11px;'>PUT YOUR EXPRESSION HERE</span>

CSS3 Text Effect: Confusion? Sadness?

Matt Cutts, what are you talking about?

<span style='color: transparent; font-size: 30px; text-shadow: rgb(51, 51, 51) 0px 0px 3px;'>PUT YOUR EXPRESSION HERE</span>

CSS3 Text Effect: Fantasy? Wish?

I wanna be Prime Minister... Hell yeah!!

<span style='font-size: 30px; color: #ffffff; text-shadow: #000 0 0 30px;'>PUT YOUR EXPRESSION HERE</span>

CSS3 Text Effect: Bold? Elegance?

Google PageRank 11 ;P

<span style='font-size: 60px; color:#f0f0f0; text-shadow: -1px -1px #FFF, 1px 1px #333;'>PUT YOUR EXPRESSION HERE</span>

CSS3 Text Effect: Defeat? Frustration?

Manchester United sucks...

<span style='color: red; position: absolute; font-size: 30px; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); text-shadow: -2px -3px 3px #292929; -webkit-text-stroke: 1px #000;'>PUT YOUR EXPRESSION HERE</span>

Conclusion

As you can see from the above examples, it is entirely possible to create wonderful visual effects with CSS3 text-shadow property alone! Those are just ideas though. It is entirely up to you and your creativity now. Do some experiments and bring them to a whole new level. While I’m at it, let me just say that such ‘decorations’ are perhaps more suitable for personal blogs but don’t let me stop you from doing whatever you like on yours. :)