1 CSS3 text shadows Mon Jun 28, 2010 5:29 pm
Guest
Guest
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.
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.The only browser currently not supporting CSS3 is Internet Explorer.Notice that almost 40% of people use IE,so they wont be able to see those shadows.Also,you must ensure that the apperance of your website will not be drastically effected when the shadows not appear.Until CSS3 is universally supported, I recommend you to use CSS3 only at headings and small parts of your website so that your website looks great even at IE
.
- www.madebytinder.com ( in the footer there is a white drop shadow)
- www.guitsaru.com(at Matt pruitt's website,you can see,on his headings and other parts of the text the use of CSS3 shadows)
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.
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.The only browser currently not supporting CSS3 is Internet Explorer.Notice that almost 40% of people use IE,so they wont be able to see those shadows.Also,you must ensure that the apperance of your website will not be drastically effected when the shadows not appear.Until CSS3 is universally supported, I recommend you to use CSS3 only at headings and small parts of your website so that your website looks great even at IE
.