(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:

<h1>ettudis</h1>

The CSS is:

h1 {
text-shadow: 2px 0 .2px #FF0000;
color:#000;
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;
color:#000;
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;
color:#000;
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 677 notes
  1. codekraft reblogged this from beneficii
  2. danielhumphreys reblogged this from jumbojays
  3. kawaiiable reblogged this from ettudis
  4. lamaggiefangirl reblogged this from trisisdeaded
  5. trisisdeaded reblogged this from zeldathemes
  6. jumbojays reblogged this from ettudis
  7. garwins reblogged this from ettudis
  8. dieneurose reblogged this from zeldathemes and added:
    Today, we’re going to be looking at how to create the 3D glasses text effect with only CSS. A familiarity with CSS is...
  9. resource-hive reblogged this from themesrec
  10. monochrome-marco reblogged this from hellolittlered-org
  11. radsadhotfag reblogged this from manatopia
  12. trinasthemes reblogged this from ettudis
  13. himebonbon reblogged this from zeldathemes
  14. resourcefulpandas reblogged this from zeldathemes
  15. frenchvanillakittens reblogged this from zeldathemes