Home
1
CSS3 Text Shadows + 3D Text Wed Jun 23, 2010 7:45 pm
Guest
Guest
CSS3 Text Shadows Adding text shadow effect with CSS |
Hi and welcome.Today we are going to talk about CSS3 text shadows.Shadows have been added to CSS2 but have been removed.Now the return to CSS3.Before we move onto the code,lets take a look at some websites that use them:
So now lets take a look at the CSS3 text shadow code: { text-shadow : 2px 2px 2px #333; } as you can see,the code is small and simple.The tree values represent the horizontal offset,the vertical offset and the shadow's blur.The color reference allows you to pick up the color of the shadow you want to be dropped.Offsets may be negative or positive. Firefox hasnt fully adapted CSS3 so we have to add -moz- before our css3 shadow code and -webkit- for Safari and Chrome. Firefox:
We can also add multiple text shadows.We will use for example that kind of shadow: { text-shadow : 4px 2px 4px #333333 } We can add multiple shadows by adding a comma and keep adding the horizontal offset,the vertical offset and the shadow's blur.Something like that. text-shadow : 4px 2px 4px #333333, 2px 2px 2px #333333 If we keep adding even more shadows the letters and the shadow will get even stronger and thicker. text-shadow:4px 2px 4px #333333, 2px 2px 2px #333333, 2px 2px 2px #333333, 2px 2px 2px #333333, 2px 2px 2px #333333, 2px 2px 2px #333333, 2px 2px 2px #333333, 2px 2px 2px #333333 With so many shadows now,our text will look more like hieroglyphics  So now,before you start using it you should learn which Browsers support CSS3.CSS3 works on Firefox,Safari,Opera & Google Chrome and at iphones.  ._________________________ Update 6 January 2011 After experimenting a little bit with CSS3 Shadows,i can now show you how to make 3D text.The whole thing is a little bit simple,but you need some basic knowlege of the 3 CSS3 Shadow values in order to work with it. What we are going to do is play(aka like little childs) with the horizontal and vertical offset.This will need multiple shadows but lets get to work: Lets start with this:
Now what we are going to do is repeat the same shadow by adding an extra pixel to the vertical offset.
Right now we are adding one more px to the vertical offset and one more to the shadows blur. 0 6px 1px rgba(0,0,0,.1), [/code] Now we keep adding pixels to the vertical offset and to the shadow's blur.
 ,change colors,size and everything you wish!!! DEMO |
| Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
Last edited by Nick on Fri Jan 07, 2011 2:53 am; edited 8 times in total
