CODEWITHSUNDEEP
htmlcsstextshadow
halo
halo

Reputation: 23

Adding shadow to my text?

Can anyone please help me to add shadow to this: http://jsfiddle.net/qzeohf20/3/

.rainbow {
    font-size: 35px;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 10px;
    font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', 'sans serif';
    background-image: -webkit-gradient( linear, left bottom, right top, color-stop(0, #C6781D),  color-stop(1, #D1B72D) );
    background-image: gradient( linear, left bottom, right top, color-stop(0, #C6781D), color-stop(1, #D1B72D) );
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-style:
}

And is it even possible?

I have already tried this: text-shadow: 1px 1px #000000;

Upvotes: 2

Views: 350

Answers (2)

Majid Sadr
Majid Sadr

Reputation: 1071

it is possible with jquery:

$(document).ready(function(){
  main_width = $(".text").width();
  main_text = $(".text").html();
  $(".text2").width(main_width);
  $(".text2").html(main_text);
});

and now you can define your second div in css with a normal style behind your text div.

Upvotes: 0

mmgross
mmgross

Reputation: 3092

It is possible, but I guess the result is not what you expect. With -webkit-background-clip: text; you actually cut put a piece of the background in the shape of your text and with color:transparent you make the text itself invisible.

So what you see here is actually the background. That means, if you add a shadow, that shadow will be rendered above your text.

You can get around this, by stacking 2 divs: The bottom div will be responsible for creating the shadow while the top div will add the gradient.
updated fiddle

Some additional things:

-webkit-background-clip: text;
background-clip: text;

There is no value text for the background-clip property. This is just a proprietary solution in WebKit browsers, so what you want will only work in those.

your last line is font-style: Apparently you forgot to add something there. Either give that property a value or delete the line.

Upvotes: 1

Related Questions