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]

1Accespted CSS3 Text Shadows + 3D Text on 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:
Code:
-moz-text-shadow 5px 5px 5px #333;
Safari-Chrome:
Code:
-webkit-text-shadow 5px 5px 5px #333;

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.IE9 will support CSS3.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 .

_________________________

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:

Code:
#omg3dtext {
  text-shadow: 0 1px 0 #ccc;
}

Now what we are going to do is repeat the same shadow by adding an extra pixel to the vertical offset.

Code:

#omg3dtext {
  text-shadow: 0 1px 0 #ccc,
              0 2px 0 #c9c9c9,
              0 3px 0 #bbb,
              0 4px 0 #b9b9b9,
              0 5px 0 #aaa,
}
As you can see we are making some slight changing in the colors so that they look more "3D like".
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.
Code:

              0 0 5px rgba(0,0,0,.1),
              0 1px 3px rgba(0,0,0,.3),
              0 3px 5px rgba(0,0,0,.2),
              0 5px 10px rgba(0,0,0,.25),
              0 10px 10px rgba(0,0,0,.2),
              0 20px 20px rgba(0,0,0,.15);
Make your own modifications and create your own 3D text using pure CSS3 Power Very Happy ,change colors,size and everything you wish!!! Very Happy

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

2Accespted Re: CSS3 Text Shadows + 3D Text on Wed Jun 23, 2010 8:00 pm

Nem


Registered Member
Registered Member
Sweet tut man Very Happy

http://www.graphics-post.com/forum

3Accespted Re: CSS3 Text Shadows + 3D Text on Fri Jun 25, 2010 3:27 am

latchy


Registered Member
Registered Member
You can't see a CSS3 text shadow in IE Wink

http://www.graphiccentral.org/

4Accespted Re: CSS3 Text Shadows + 3D Text on Fri Jun 25, 2010 6:31 pm

Guest


Guest
@ latchy
yup i know and i have crearly written it here
CSS3 works on Firefox,Safari,Opera & Google Chrome and at iphones.The only browser currently not supporting CSS3 is Internet Explorer

Wink

5Accespted Re: CSS3 Text Shadows + 3D Text on Sun Jun 27, 2010 10:18 am

ankillien


Administrator
Administrator
Hi CP!

The tutorial looks good.
I think you should remove the westciv.com link from there since providing a link to some tools can't be considered as tutorial.

Also, I suggest you to make the tutorial perfect by explaining how to add multiple text shadows.

Thank you.

6Accespted Re: CSS3 Text Shadows + 3D Text on Sun Jun 27, 2010 3:35 pm

Guest


Guest
Edited Smile

7Accespted Re: CSS3 Text Shadows + 3D Text on Sun Jun 27, 2010 7:55 pm

ankillien


Administrator
Administrator
Cool!
Now it looks perfect Very Happy

Thank for your contribution Smile

Tutorial Accepted

8Accespted Re: CSS3 Text Shadows + 3D Text on Mon Dec 27, 2010 12:07 am

Guest


Guest
Tutorial updated a little bit.

9Accespted Re: CSS3 Text Shadows + 3D Text on Mon Dec 27, 2010 1:24 am

Terry Harvey


Registered Member
Registered Member
Nice, but you made a typo

Nick wrote:-webkit-test-shadow 5px 5px 5px #333;

10Accespted Re: CSS3 Text Shadows + 3D Text on Mon Dec 27, 2010 1:28 am

Guest


Guest
McStormify wrote:Nice, but you made a typo

Nick wrote:-webkit-test-shadow 5px 5px 5px #333;

Sorry didnt see it Razz

Thanks for finding it Wink

11Accespted Re: CSS3 Text Shadows + 3D Text on Mon Dec 27, 2010 1:32 am

Terry Harvey


Registered Member
Registered Member
No problem Wink Awesome tut by the way (: You can also use this to make glow effects with this code:

Code:
text-shadow: 0px 0px 5px #000;

12Accespted Re: CSS3 Text Shadows + 3D Text on Mon Dec 27, 2010 1:36 am

Guest


Guest
McStormify wrote:No problem Wink Awesome tut by the way (: You can also use this to make glow effects with this code:

Code:
text-shadow: 0px 0px 5px #000;

yea thanks for mentioning it Smile
I dont call it glow Razz its just text shadow without horizontal and vertical offset Razz (0px 0px)

13Accespted Re: CSS3 Text Shadows + 3D Text on Mon Dec 27, 2010 1:37 am

Terry Harvey


Registered Member
Registered Member
I know it's not actually a glow but it has the same effect Wink Razz

EDIT:

Don't you need to add the accepted topic icon Anki?

14Accespted Re: CSS3 Text Shadows + 3D Text on Mon Dec 27, 2010 12:07 pm

ankillien


Administrator
Administrator
McStormify wrote:I know it's not actually a glow but it has the same effect Wink Razz

EDIT:

Don't you need to add the accepted topic icon Anki?

I already added bu twhen the author edits the post, it will be reset to none.

15Accespted Re: CSS3 Text Shadows + 3D Text on Fri Jan 07, 2011 2:53 am

Guest


Guest
*Updated

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