3D Glasses Text CSS Tutorial

ettudis:

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. 

TAGS:   css-tricks.   resource: tutorial.   tutorial.   css.   3D Text.   resource.

Jennifer Lawrence @ The Hunger Games Paris Premiere (jeudi 15 mars 2012)
          perfect sexy back 

(Source: antilogie)

"We could do it, you know. Take off. Live in the woods."

(Source: antilogie)

TAGS:   thg.   the hunger games.   gif.   trailer.   katniss everdeen.   gale.   woods.   gif.
TAGS:   blair.   chuck.   gossip girl.   blair x chuck.   gossip.   girl.   blair waldorf.   chuck bass.   season 5.   header.
TAGS:   zippora seven.   zippora.   seven.   model.   graphic.   mine.   blend.
TAGS:   bann.   mine.   clémence poésy.   clemence poesy.
TAGS:   bann.   mine.   clémence poésy.   clemence poesy.