(INDEFINITE HIATUS) ettudis/ browse/ history/ ask/ Contains theme-related question and answers, html and css tutorials, resources of all types.

Themes are located on the website (click the link labeled "content", it will drop down to link to "tumblr themes").

3D Glasses Text CSS Tutorial

Today, we’re going to be looking at how to create the 3D glasses text effect with only CSS. A familiarity with CSS is required but it is a very easy concept to grasp. For a clearer example, please take a look my monologue theme for a live preview of the effect. (Also, click on images for larger view)

So basically, the 3D Glasses effect is just using 2 text-shadow properties placed in different positions to achieve the tri-coloured look. Having one text-shadow property can make a text look like the following:

The text will be put as a heading in the HTML:


The CSS is:

h1 {
text-shadow: 2px 0 .2px #FF0000;
font:25px lucida sans,arial,sans-serif;

The 2px explains the positioning in the horizontal plane (positive is to the right, negative is to the left). The 0 explains the positioning in the vertical plane (negative is upward, positive is downward) and the .2px explains the extent of blur and of course, #FF0000 is the hex colour of the shadow. 

For example, a blue text-shadow going ONLY to the left will look like the following (note the negative sign):

The CSS:

h1 {
text-shadow: -2px 0 .2px #00F1F5;
font:25px lucida sans,arial,sans-serif;

Now we put two of those text-shadow properties together, one going to the right (red) and one going to the left (blue). 

h1 {
text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
font:25px lucida sans,arial,sans-serif;

Notice, I’ve added a comma, followed by the second text-shadow properties, and ta-da! That’s how you get a 3D Glasses effect for your text using CSS. 

Posted on 23 May 2012, with 707 notes
  1. padawantime reblogged this from manatopia
  2. witchpls reblogged this from zeldathemes
  3. vxrgintears reblogged this from ettudis
  4. princebonebun reblogged this from manatopia
  5. shinysakura reblogged this from victorythemes
  6. firebends reblogged this from zeldathemes
  7. ghostbustercas reblogged this from ettudis
  8. codekraft reblogged this from beneficii
  9. kawaiiable reblogged this from ettudis
  10. victorythemes reblogged this from ettudis
  11. lamaggiefangirl reblogged this from trisisdeaded
  12. trisisdeaded reblogged this from zeldathemes
  13. garwins reblogged this from ettudis