Add 3D Text Effect Using CSS On Blogger

Inspired by the effect on David DeSandro's footer, I worked out the CSS behind his three dimensional text effect. Well, in this article, you'll be able to get a similar effect on your blogspot blog. The normal state shows the text with a black shadow and on hover, you get to see a colorful text with colorful shadow. Take a look at the live demo using the link below to better understand about the same.

3D TEXT EFFECT ON BLOGGER - LIVE DEMO

ONE-CLICK INSTALLATION TOOL FOR NEWBIES

The recent entries on my blog had the one click installation tool and I've incorporated the same in this article as well. I recommend the newbies to follow this method whereas the experts/webmasters can follow the detailed procedure. Firefox 3.0+, IE 9.0 and Opera are some of the browsers that support the one-click installation method. So, make sure your browser is one among them and hit the following button to install the 3D text effect on your blog.

DETAILED PROCEDURE FOR WEBMASTERS

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Paste the code present in this text document - CSS FOR 3D TEXT EFFECT, just above/before the the line mentioned at step 1.

3. Now, paste the following codes anywhere in between the opening and closing of body tags on your template.

<div id="animationWrapper">
<a href="EXAMPLE URL">
    <span class="span1">Sample</span>
    <span class="span2">Example</span>
    <span class="span3">Effects</span>
    <span class="span4">Blogger</span>
</a>
</div>

Ideas: You may add this 3D effect to display your blog title or post title or show off your links at footer similar to DeSandro's blog. The choice is left to the individual.

4. That's it! Save your template.

CUSTOMIZATION COMMON TO NEWBIES AND WEBMASTERS

Replace EXAMPLE URL in the coding with the URL of your choice and correspondingly, replace the text that runs between the span tags with that of your choice. Further customizations include changing the font size, color and its type - just play around with the CSS to change these customizations. Hit me via comments if you need assistance in doing so.

The above effect was tested to work perfectly fine on all the major browsers that includes, but not limited to, Firefox 3.0+, IE 9.0, Opera and Safari. I hope you enjoyed this tutorial. Share your opinions via comments!

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

Ritesh @ TechSpacia said on September 24, 2011 at 3:38 PM :

nice one... 3D using css. I never heard of it.
Thanks for sharing.

Mohammad

Great work Mukund really cool and looking nice.
Thank You!

Anonymous

Yaar! y there's no demo?

Mukund said on September 24, 2011 at 11:30 PM :

@Ritesh @ TechSpacia: Yup! Thanks for the comment buddy! Hope to hear more from you:)

Mukund said on September 24, 2011 at 11:31 PM :

@Mohammad: Yup! Thanks Mohadmmad! I hope I continue to post articles that interest you:)

Mukund said on September 24, 2011 at 11:32 PM :

@Anonymous: Please look after the first paragraph, you have a live demo buddy! Go check it out:)

SAM said on September 25, 2011 at 3:23 AM :

@munkund nice job, keep it up, your job has always been wonderful. i will try this one now...pls link me up http://www.phonetechng.blogspot.com/

Hey, did you noticed something!!
Blogger disabled its lightbox feature.. :((
I really want that feature for my photography blog!!!!!!! :((((

Mukund said on September 25, 2011 at 4:26 PM :

@SAM: That's great! Thanks for the comment! Hope you enjoy the upcoming articles as well!

Mukund said on September 25, 2011 at 4:27 PM :

@Anonymous: Well, that was a beta test and many did not like the feature! So, they removed the same! They'll soon launch the same with options to enable and disable that effect. There's a lot to come on Blogger as far as I know.

M.Pinto @ ProHacker said on September 25, 2011 at 8:18 PM :

This is great!! Thank you.. :)

Mukund said on September 25, 2011 at 11:38 PM :

@M.Pinto @ ProHacker: Yup! Thanks for the comment buddy!

Peter said on September 26, 2011 at 8:48 AM :

Hey Mukund, what should I put between those span tags? What if I only want my blog title to have this effect?

Mukund said on September 26, 2011 at 3:32 PM :

@Peter: Just change the text in between the span tags to reflect your text! To get this working on your blog as title, you need to change the header part of your template. You may hire me to get it done:)

psydex said on October 4, 2011 at 12:21 AM :

I want to replace my "logo" with this but i can't make it work. First of all i can't remove my logo place cuz it's not placed as widget. Second - i want it on one line with different colors. my blog is http://mobers.org - will appreciate it if you help me!!

Mukund said on October 4, 2011 at 1:01 AM :

@psydex: Why not! Would love to help you! Hit me via my gmail id and I'll probably get you the basic idea about how to do it:)

George Anderson said on October 4, 2011 at 9:17 AM :

Thanks for this update. I learn a lot.

Mukund said on October 5, 2011 at 1:11 AM :

@George Anderson: Yup! Thanks for the comment George! Would love to hear more from you:)

Ladida said on October 21, 2011 at 3:29 PM :

it's nice..
does it use text-shadow and transition?

Mukund said on October 22, 2011 at 12:02 AM :

@Ladida: Yes! Exactly! It does use transitions and text shadows. Thanks for the comment!

Darjeeling Info said on November 9, 2011 at 9:34 PM :

Nice information i heard this for the first time and I will use it..thanks for the tip..

negetive traits said on December 23, 2011 at 10:39 PM :

dude, make me some detailed view of this 3d effect

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT