Эффект вдавленного текста

[Stavanger]

Доброго времени суток уважаемые форумчане!

 

У меня такая проблема. Хочу добиться эффекта вдавленного текста с помощью css3, принцип как это работает понимаю, но есть небольшое НО.

 

В моем случае имеется такой стиль:

.navbar {	padding-right: 20px	background-color: #2C2C2C;	background-image: -moz-linear-gradient(center top , #333, #222);	background-repeat: repeat-x;    border-radius: 0px;	box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.25), 0px -1px 0px rgba(0, 0, 0, 0.1) inset;	padding-left: 20px;	background-attachment: scroll;}h1 {	color: #151515;	padding-top: 5px;	font-weight: 900;	font-size: 50px;	font-family: Arial,​ Tahoma,​ Verdana,​ sans-serif;	text-shadow: -2px -2px 1px rgba(70, 70, 70, 0.1), 2px 2px 1px rgba(70, 70, 70, 0.1);}

вот так он выглядит в браузере, кидаю ссылку, потому что не получается прикрепить скрин:

 

http://joxi.ru/8AnBYLxFzPL4AO

 

Эффекта как видите нет, бэкграунд дива с градиентом, на тексте градиента нет конечно же, думаю в этом причина.

У кого какие мысли по этому поводу, есть ли решение данной проблемы?

 

ps: хочу использовать только css3, не хочу использовать просто картинку сделанную в фотошопе

 

Всем кто откликнулся на мою тему, заранее спасибо=)

 

[Aleksandr.L]

http://jsfiddle.net/0udsketz/

[afdw]

http://jsfiddle.net/h5s3ga9k/2/

Edited November 27, 2014 by afdw

[Stavanger]

http://jsfiddle.net/0udsketz/

это помогло, но реализуется немного по-другому, пришлось подправить код.

спасибо =)

Aleksandr.L

[Stavanger]

http://jsfiddle.net/h5s3ga9k/2/

это то что надо, оказывается я в тенях путался, спасибо=)

еще бы градиент придать тексту, такой же как на фоне дива, было бы вообще шик

afdw

[kattiperk]

Для текста

background-clip: text;

Edited November 27, 2014 by kattiperk