(semi-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 644 notes
  1. trinasthemes reblogged this from ettudis
  2. himebonbon reblogged this from zeldathemes
  3. resourcefulpandas reblogged this from zeldathemes
  4. frenchvanillakittens reblogged this from zeldathemes
  5. dreadedcecity reblogged this from zeldathemes
  6. pinkuchen reblogged this from yukoki
  7. bluerecover reblogged this from ettudis
  8. nataliedormerofrps reblogged this from zoeyrph
  9. slothchoi reblogged this from thegrimduet
  10. codinglessons reblogged this from ettudis
  11. ahothemes reblogged this from 7th-district
  12. arielwrites reblogged this from destinyhelps
  13. lyssaofrp reblogged this from zoeyrph
  14. destinyhelps reblogged this from abigailrps
  15. abigailrps reblogged this from maliofrp
  16. maliofrp reblogged this from thekingwrites
  17. thekingwrites reblogged this from minahofrps
  18. wreckingballrph reblogged this from minahofrps
  19. minahofrps reblogged this from zoeyrph
  20. halesofrp reblogged this from zoeyrph
  21. ladybugofrp reblogged this from zoeyrph