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>

html5-css3-blue-logos


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. :)


Subscribe via RSS or Email:

Related Posts


2 comments:

web design company said...

It proved to be very helpful to me and I am sure to all the commenters here! It's always nice when you can not only be informed, but also entertained! I'm sure you had fun writing this article.

homebiss said...

Yes, I sure had fun writing this. :)

I just hope visitors realize that they need to view this post with browsers such as Chrome, Firefox and Safari to enjoy it.

Post a Comment

  • Commenters are encouraged to leave comments via OpenID but if you have problems in leaving one via OpenID, please refer to this excellent guide.
  • Comments that add tremendous value to the blog post will not only get approved but also will be personally tweeted (learn how!) by the blogger behind this blog, giving commenters the opportunity to get even more traffic and gain even more exposure to their sites or blogs.
  • Comments that have links in the bodies of comments will never be approved.
  • Preferably comments should be made in English but comments in other languages are also acceptable.