I am very happy to see, CSS3 finally eliminates the use of Photoshop in terms of giving text shadows. I was just trying my hands on text shadows in CSS3 and thought of creating 3D text by giving multiple shadows and got something wonderful.
Earlier Text Shadows were announced since the beginning of CSS2 however, the only browser that was supporting this functionality was Safari.
If you talk about today’s condition, almost all the browsers except Internet Explorer are running Text Shadows successfully.
I agree that we would not be able to use these shadows for clients for next few years because of cross browser compatibility however these features can help you push the boundaries of modern Web Technology today.
We do have certain jQuery plug-ins available like IE CSS Shadow that can create shadowed text completely compatible with Internet Explorer.
Let’s learn how we create 3D text using CSS3. I am giving text shadow to Heading and Paragraph tags.
HTML code written below will land up in between the body tag.
3 |
<p>This works well with major Browsers like FireFox, Opera, Safari and Chrome however does not work with Internet Explorer!</p> |
Here we have the CSS for giving heading and paragraph multiple shadows to give 3D effect.
02 |
font:normal 60pt Arial; |
04 |
text-shadow: 0 1px 0 #ccc, |
09 |
0 6px 1px rgba(0,0,0,.1), |
10 |
0 0 5px rgba(0,0,0,.1), |
11 |
0 1px 3px rgba(0,0,0,.3), |
12 |
0 3px 5px rgba(0,0,0,.2), |
13 |
0 5px 10px rgba(0,0,0,.25), |
14 |
0 10px 10px rgba(0,0,0,.2), |
15 |
0 20px 20px rgba(0,0,0,.15); |
19 |
font:normal 40pt Arial; |
21 |
text-shadow: 0 1px 0 #ccc, |
26 |
0 6px 1px rgba(0,0,0,.1), |
27 |
0 0 5px rgba(0,0,0,.1), |
28 |
0 1px 3px rgba(0,0,0,.3), |
29 |
0 3px 5px rgba(0,0,0,.2), |
30 |
0 5px 10px rgba(0,0,0,.25), |
31 |
0 10px 10px rgba(0,0,0,.2), |
32 |
0 20px 20px rgba(0,0,0,.15); |
Source Cssrex
