WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1CSS3 text shadows Empty 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:

  • 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 Smile
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
Wink .

2CSS3 text shadows Empty Re: CSS3 text shadows Mon Jun 28, 2010 11:24 pm

ankillien

ankillien
Administrator
Administrator
The original tutorial is fixed and works fine now.

Locked

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum