Making Your Text Appear 3D

Making your text look as though it is 3D is actually a lot simpler than it sounds.  I watched a couple of tutorials on this trick; however, the easiest one I found was dealing with “text-shadow.”  For this trick you kind of get to play around with how you want it to look.  The basic outline of the CSS code looks as followed:Image

(from the website:http://markdotto.com/playground/3d-text/)

 

You can play around with the pixels and colors to get it to match your background perfectly.  I tried it on my recovery story project and it was a little more difficult because I had a picture as a background so the color was not matching up perfectly.  If you are using a solid color as your background this trick may be a lot easier to do.  

Image this is what my title looked like before adding the text shadow (or the 3D look)

 

Imageand this is how it looks after.  As you can tell I played around with the colors a lot to get the right shadow.  This is what you will need to do to make it look right for your text and background color.  Hope you guys found this helpful!

Advertisements

One comment

  1. Thanks for the tip. If I had to do this kind of text effect I’d probably start a whole new photo shop document and then insert that into my HTML. But if I can do something similar in CSS, that’ll save me a lot of time.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s