CSS3 Inner Shadow и Gradient на текст

[Vladkata]

Здравейте! Трябва ми начин да постигна ефект от Photoshop - Inner Shadow (вътрешна сянка) и Gradient на текст. Търсих и пробвах доста неща от първите резултати в Gogle, но не ме устройват. Трябва ми работещ вариант, като да мога да променям цвета.

Засега имам това:
[css]
h1 {
font-size: 72px;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
[/css]

Но не знам поради каква причина, няма цвят. Пробвах с прозрачност да го манипулирам (Alpha) - така става, но отново няма цвят...

Относно вътрешната сянка, гледах и затова уроци, но беше обяснено по следният начин: дублиране на текст и наместване и сумати код, за едно нещо...

Не, не ме устройва варианта да сложа изображение на текста, искам да си е текст.

Благодаря предварително!

 

[Meniak]

Сянка 6px с цвят #3e3e3e това е за Mozilla
[css]
-moz-box-shadow: 6px 6px 6px #3e3e3e;
[/css]

Тапет - градиент пак за Mozilla
[css]
background: -moz-linear-gradient(#3d3d3d, #c1c1c1, #3d3d3d);
[/css]

Аз това използвам. Sorry сега видях че ти трябва сянка/градиент за тект

 

[Vladkata]

Мда, стана с background-clip: text;. Но сега ми трябва ефект който да имитира вътрешна сянка...

Благодаря!

 

[Meniak]

За сянка на текст еи това намерих и при мен работи
[css]
text-shadow: 8px 8px 8px #000;
[/css]

 

[Vladkata]

Да, но аз говоря за вътрешна сянка, т.е. един вид текста да изглежда вдлъбнат...

 

[relax4o]

Виж това http://dabblet.com/gist/1609945

 

[Vladkata]

Виж това http://dabblet.com/gist/1609945

Досега го мъчих, не става... :X

 

[relax4o]

Я да видя как точно го правиш.


ЕДИТ: Само да знаеш, че title атрибута е важен в случая. Ако ще ползваш примерно rel промени това:

[css]
.depth:before, .depth:after {
content: attr(title);
[/css]

на

[css]
.depth:before, .depth:after {
content: attr(rel);
[/css]

 

[IvanAdamov]

text-shadow: 8px 8px 8px #000 inset;

 

[Vladkata]

Кодът до сега:
[css]
#body_head{
top: 0;
margin-left: 30%;
font-family: NewZelek;
font-size: 22px;
background: -webkit-linear-gradient(#ffbd00, #b58600);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 2px 2px 2px #000 inset;
}
[/css]

Под Mozilla Firefox е мазало, въпреки че съм включил (-moz-, -o-, -ms-, -khtml-)...


А така с тази сянка не става...

 

[relax4o]

А я дай да видя от това, което ти дадох как го правиш ти. + HTML-а.

 

[Vladkata]

А я дай да видя от това, което ти дадох как го правиш ти. + HTML-а.

Ами не съм го правил с тези <div>-ове, но направих нови с различно име, но нищо не стана...

Ще те потърся (ЛС или Skype) да видиш.

 

[relax4o]

А я дай да видя от това, което ти дадох как го правиш ти. + HTML-а.

Ами не съм го правил с тези <div>-ове, но направих нови с различно име, но нищо не стана...

Ще те потърся (ЛС или Skype) да видиш.

Давай ЛС.