Как сделать белый фон только под буквами шрифта с «частичной прозрачностью»?

Question

[mastra]

Здравствуйте, уважаемые участники сообщества!

Подскажите, возможно ли сделать следующее.

Есть особый дизайнерский шрифт Mexcellent 3D ( www.1001fonts.com/mexcellent-font.html ). У него "объемные буквы", но прозрачные. Можно ли на css сделать так, чтобы белая подложка была только под буквами и не выезжала за их границы? Или как-то блок сверху наложить, с особой прозрачностью... Посоветуйте, пожалуйста!

Для наглядности картинка:



Код самый простой:

h3.list_title {
color:#000;
font-size: 50px;
font-family: 'mexcellent3d', sans-serif;
background-color: #a60000;
}

.list_title a {
text-decoration: none;
color:rgba(0,0,0,1);
}

<h3 class="list_title"><a href="/">Roots</a></h3>

UPD: прилагаю картинку, как получается с решением, предложенным @EPIDEMIASH



Выглядит уже лучше, но все-таки не так, как хотелось бы.

UPD2: подошел вариант text-shadow: -1px -1px #fff;

Answer 1

[Владимир Юрченков]

.list_title a {
text-decoration: none;
background-color: #565656;
color: transparent;
text-shadow: 0px 1px 1px rgba(255,255,255,1);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}

Comments

[mastra]

Владимир, спасибо за быстрый ответ! Но это все же немного не то... Отредактировала вопрос, приложив картинку, как получается с предложенными вами стилями.

[Владимир Юрченков]

mastra: вроде больше никак, можно перерисовать шрифт)

[mastra]

Владимир Юрченков: ясно... очень жаль... в мозиле решение смотрится грязновато (

[Владимир Юрченков]

mastra: попробуйте поработать с тенью, это просто пример, подкрутите значения

[mastra]

Владимир Юрченков: и точно! Остановилась на варианте text-shadow: -1px -1px #fff;