Creating Words and Letters With Shadow Effect

@LearnEveryDayJun 30.2011

I would like some help in how to “shadow effect” words and letters in.
I don’t know anything about Javascript but if I could get help with this I certainly would appreciate it.
I know there has to be a simple way to do this and be able to change the shadow color, whether shadow is left or right, size, etc.

Thanks,
LearnEveryDay!

to post a comment

JavaScript

14 Comments(s) _↴

@NitecruzexJun 30.2011 — #Box shadow and text shadow can create stunning effects. Follow this link :http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/

@LearnEveryDayauthorJun 30.2011 — #Thanks for the link. I went there and sure enough some good stuff but, I still am lost as what to do. It looks like this is Css and I am clueless as how to write it into my webpage.

@007JulienJul 01.2011 — #You can always build a function to clone spans with class shadow...

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="fr">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="generator" content="PSPad editor, www.pspad.com">
 <title>Shadows...</title>
 <style type="text/css">
 body {font-size:34px;background:#F9EFC1}
 p {text-align:center}
 .shdMsq {display:block;position:relative;left:-2px;top:0;color:#C95E46}
 .shadow {color:#713510}
 </style>
 </head>
 <body>
 <p><span class="shadow">Bonjour !</span></p>
 <script type="text/javascript">
 function Shadow(){var i,t=document.getElementsByTagName('span'),s=[],p,q;
 for (i in t) if (/shadow/.test(t[i].className)) {s[s.length]=t[i];}
 for (i=0;i<s.length;i++){
 p=s[i].parentNode;q=s[i].cloneNode(true);
 q.className="shdMsq";p.insertBefore(q,s[i]);
 q.style.top=(s[i].offsetHeight-1)+'px';}
 }
 Shadow();
 </script> 
 </body>
 </html>[/code]

This function is to call when the page is loaded.

@LearnEveryDayauthorJul 01.2011 — #You can always build a function to clone spans with class shadow...

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="fr">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="generator" content="PSPad editor, www.pspad.com">
 <title>Shadows...</title>
 <style type="text/css">
 body {font-size:34px;background:#F9EFC1}
 p {text-align:center}
 .shdMsq {display:block;position:relative;left:-2px;top:0;color:#C95E46}
 .shadow {color:#713510}
 </style>
 </head>
 <body>
 <p><span class="shadow">Bonjour !</span></p>
 <script type="text/javascript">
 function Shadow(){var i,t=document.getElementsByTagName('span'),s=[],p,q;
 for (i in t) if (/shadow/.test(t[i].className)) {s[s.length]=t[i];}
 for (i=0;i<s.length;i++){
 p=s[i].parentNode;q=s[i].cloneNode(true);
 q.className="shdMsq";p.insertBefore(q,s[i]);
 q.style.top=(s[i].offsetHeight-1)+'px';}
 }
 Shadow();
 </script> 
 </body>
 </html>[/code]

This function is to call when the page is loaded.[/QUOTE]

AWESOME!!!!

Thank you very much. This will work very well. I am very grateful to you.

LearnEveryDay

@007JulienJul 01.2011 — #It's works not so well when the span does not cover the entire paragraph !

@LearnEveryDayauthorJul 01.2011 — #Got it!

Thanks.

@007JulienJul 01.2011 — #Here is a solution

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="fr">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="generator" content="PSPad editor, www.pspad.com">
 <title>Untitled</title>
 <style type="text/css">
 body {font-size:34px;background:#F9EFC1}
 p {margin:0;padding:0;text-align:center}
 span {margin:0;padding:0;}
 .shdMsq {display:block;position:absolute;left:0;top:0;color:#C95E46}
 .shadow {color:#713510}
 </style>
 </head>
 <body>
 <p><span class="shadow">Eureka !</span></p>
 <p><span class="shadow">I</span> Found It !</p>
 <script type="text/javascript">
 function Pos(e){var x=y=0;
 do {x+=e.offsetLeft;y+=e.offsetTop} while (e=e.offsetParent)
 return [x,y];
 }
 function Shadow(){var i,t=document.getElementsByTagName('span'),s=[],p,q,c;
 for (i in t) if (/shadow/.test(t[i].className)) {s[s.length]=t[i];}
 for (i=0;i<s.length;i++){
 p=s[i].parentNode;c=Pos(s[i]);
 q=s[i].cloneNode(true);
 q.className="shdMsq";
 p.insertBefore(q,s[i]);
 q.style.left=(c[0]-2)+'px';q.style.top=(c[1]-2)+'px';
 }
 }
 Shadow();
 </script> 
 </body>
 </html>[/code]

@LearnEveryDayauthorJul 01.2011 — #Great!

Is this the line I make changes to the shadow?

Left, right, Top and Bottom?

[COLOR="Red"].shdMsq {display:block;position:absolute;left:5;top:-5;color:#C95E46} [/COLOR]

@007JulienJul 01.2011 — #Q the clone of each span s[i] (a inline element) from class "shadow" is now change to a absolutely positioned and colored span block with the style line .shdMsq.

After to be insert in the document in p before s[i] ([I]p.insertBefore(q,s[i]);[/I]) this block is positioned in reference to c (the position of s[i] in the page given by the function Pos()) with this line (with two gap from 2 pixels):

[code=html] q.style.left=(c[0]-2)+'px';q.style.top=(c[1]-2)+'px';[/code]

I choose before a gap of 2 pixels left and only one top, which is probably better !. You can adapt this gap to the font-size...

@LearnEveryDayauthorJul 01.2011 — #Great. I understand that part now, i was changing settings in the wrong place.

Now I want to be able to use different fonts like verdana and arial. Where do I make those changes?

Thanks,

@007JulienJul 01.2011 — #You change the style of the body or of différent elements...

body {font-family:"Lucida Handwriting",Comics;font-size:34px;background-color:#F9EFC1}

See a tutorial for CSS

@LearnEveryDayauthorJul 01.2011 — #Thanks...

Is it possible to outline the letters like in this image?

http://GodsBlessingsNow.info/images/Crisislevels1.jpg

@007JulienJul 02.2011 — #No ! WebFonts have only one color (two with the background-color). This kind of image are made with Photoshop or Paint Shop.

Otherwise the script is to change to be able to resize the window.

[code=html]<script type="text/javascript">
 function Pos(e){var x=y=0;
 do {x+=e.offsetLeft;y+=e.offsetTop} while (e=e.offsetParent)
 return [x,y];
 }
 function Shadow(){var i,t=document.getElementsByTagName('span'),s=[],p,q,c; 
 for (i in t) {if (/shadow/.test(t[i].className)) s[s.length]=t[i];
 if (/shdMsq/.test(t[i].className)) t[i].parentNode.removeChild(t[i]);}
 for (i=0;i<s.length;i++){
 p=s[i].parentNode;
 q=s[i].cloneNode(true);
 q.className="shdMsq";
 c=Pos(s[i]);//alert(c)
 
   p.insertBefore(q,s[i]);
   q.style.left=(c[0]-3)+'px';q.style.top=(c[1]-3)+'px';
   }
 }
 Shadow();
 window.onresize=Shadow;
 </script>	[/code]

@LearnEveryDayauthorJul 02.2011 — #LOL! Calm down, this is an image I made using Photoscape. I did find the outline code. That's all I needed was an outline code that I could change outline color and size....

Thanks,

Also in #JavaScript _↴

Internet connection speed detect How do I do Animations in Javascript window.print() and rotate a text

Success!

Help @LearnEveryDay spread the word by sharing this article on Twitter...

Tweet This

Creating Words and Letters With Shadow Effect

14 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Creating Words and Letters With Shadow Effect

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴