CODEWITHSUNDEEP
htmlcss
Jayesh Kakatkar
Jayesh Kakatkar

Reputation: 49

Why are these text-shadow effects not working?

     <p style="color: hsl(230, 100%, 50%); 
        text-shadow: 0 2px 0 0px hsl(330, 100%, 25%), 
         0 3px 2px 0px hsla(330, 100%, 15%, 0.5), 
         0 3px 0 3px hsl(350, 100%, 50%), 
         0 5px 0 3px hsl(350, 100%, 25%), 
         0 6px 2px 3px hsla(350, 100%, 15%, 0.5),  
         0 6px 0 9px hsl(20, 100%, 50%), 
         0 8px 0 9px hsl(20, 100%, 25%), 
         0 9px 2px 9px hsla(20, 100%, 15%, 0.5),  
         0 9px 0 18px hsl(50, 100%, 50%) 
         0 11px 0 18px hsl(50, 100%, 25%), 
         0 12px 2px 18px hsla(50, 100%, 15%, 0.5),  
         0 12px 0 30px hsl(70, 100%, 50%), 
         0 14px 0 30px hsl(70, 100%, 25%), 
         0 15px 2px 30px hsla(70, 100%, 15%, 0.5), 
         0 15px 0 45px hsl(90, 100%, 50%), 
         0 17px 0 45px hsl(90, 100%, 25%), 
         0 17px 2px 45px hsla(90, 100%, 15%, 0.5);">Text Shadow</p>

This is my code which i copied from http://msdn.microsoft.com/en-us/hh867756.aspx It should give effect of color happiness on that page. I am using Firefox 30. I also tried to open it in opera it does not work there either. I tried to change hsla to rgb (I know that was useless but i just tried any ways). I also removed all the new lines but still no text-shadow appears just plain simple text.Any hint why is it happening?

Upvotes: 0

Views: 1349

Answers (3)

ZombieCode
ZombieCode

Reputation: 1661

I was able to get it working in FF (v31), but like Moob stated: IE only takes the spread, so this fix is not an exact replica. I have posted the example in Codepen. I think with some tweaks you could get it looking more like the example.

CodePen Example

h2 {
    font-size: 130px; 
    font-family: Arial;
    color: hsl(330, 100%, 50%); 
    text-shadow: 2px 0px hsl(330, 100%, 25%),
          3px 2px 0px hsla(330, 100%, 15%, 0.5),              
          3px  3px hsl(350, 100%, 50%), 
          5px  3px hsl(350, 100%, 25%), 
          6px 2px 3px hsla(350, 100%, 15%, 0.5),              
          6px  9px hsl(20, 100%, 50%), 
          8px  9px hsl(20, 100%, 25%), 
          9px 2px 9px hsla(20, 100%, 15%, 0.5),              
          9px  18px hsl(50, 100%, 50%),
          11px  18px hsl(50, 100%, 25%), 
          12px 2px 18px hsla(50, 100%, 15%, 0.5),              
          12px  30px hsl(70, 100%, 50%), 
          14px  30px hsl(70, 100%, 25%), 
          15px 2px 30px hsla(70, 100%, 15%, 0.5),              
          15px  45px hsl(90, 100%, 50%), 
          17px  45px hsl(90, 100%, 25%), 
          17px 2px 45px hsla(90, 100%, 15%, 0.5);
}

Upvotes: 0

Simple Sandman
Simple Sandman

Reputation: 900

As a workaround, you can use either:
http://css3gen.com/text-shadow/
http://css3generator.com/
to generate the text-shadow code you need.

Use this reference to familiarize yourself with the syntax.

Upvotes: 0

Moob
Moob

Reputation: 16184

CSS text-shadow takes four values: distance-x, distance-y, blur, and the colour.

E.G:

p { 
  text-shadow: 1px 1px 1px #000, 
               3px 3px 5px blue; 
}

Only IE accepts the extra spread value.

In addition (as commented) you are missing a comma between here:

0 9px 0 18px hsl(50, 100%, 50%)  <<<<
0 11px 0 18px hsl(50, 100%, 25%),

Upvotes: 1

Related Questions