Добавление тени в текст?

Question

Может кто-нибудь, пожалуйста, помогите мне, чтобы добавить тень к этому: 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: 
} 

И это возможно?

Я уже пробовал это: text-shadow: 1px 1px #000000;

Answer 1

Это возможно, но я думаю, что результат не то, что вы ожидаете. С -webkit-background-clip: text; вы на самом деле вырезали фрагмент фона в форме вашего текста и с color:transparent вы сделаете текст невидимым.

Так что вы видите здесь на самом деле фон. Это означает, что если вы добавите тень, эта тень будет отображаться над вашим текстом.

Вы можете обойти это, уложив 2 divs: нижний div будет отвечать за создание тени, в то время как верхний div добавит градиент.
updated fiddle

Некоторые дополнительные вещи:

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

Там нет значения text для свойства фона клипа. Это просто запатентованное решение в браузерах WebKit, поэтому то, что вы хотите, будет работать только в них.

Ваша последняя строка: font-style: Видимо, вы забыли что-то добавить. Либо присвойте этому свойству значение, либо удалите строку.

Answer 2

можно с JQuery:

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

и теперь вы можете определить свой второй DIV в CSS с нормальным стилем позади текста дел.