Как создать хороший эффект глубины текста \ тени? (HTML)

Question

Мне нужен некоторый класс JS или метод CSS для создания из любого текста такого текста с тенью, как на этой веб-странице ...

Экран страницы:

экран с сайта Yummygum http://superior0.narod.ru/deepText.jpg

Мне нужно, чтобы он работал в IE 6,7,8 Chrome 4, FF 3 и т. Д.

Answer 1

Элемент проверки говорит: text-shadow:0 1px 0 #3B3B3B;

Подробнее о тени текста http://www.quirksmode.org/css/textshadow.html http://www.css3.info/preview/text-shadow/

Answer 2

Если вы должны использовать IE6, вам придется использовать старые хаки (или, как всегда, - злоупотреблять JQuery, поскольку он пинает задницу). Примерно так:

<style>
  .text1{ color: white }
  .shadow1{ color: silver; position: relative; right: 1px; bottom: 1px }
  .shadow1{ color: black; position: relative; right: 2px; bottom: 2px }
</style>
<div class="text1">Text shadow</div>
<div class="shadow1">Text shadow</div>
<div class="shadow2">Text shadow</div>

Очень, очень старая школа. Будьте осторожны, не вставляйте его в таблицу на переходной странице HTML4.01; -)

Answer 3

Используйте свойство CSS3 text-shadow . Это, однако, поддерживается не всеми веб-браузерами. Возможно, вы захотите рассмотреть плагин jQuery TextShadow , чтобы незаметно охватывать неподдерживаемые.

Answer 4

Вы можете создать этот эффект с помощью свойства text-shadow css3.

Пример:

p.test {
    text-shadow: #6374AB 20px -12px 2px;
}

.

Быстрый просмотр:

Конечно, вам придется изменить значения в соответствии с вашими потребностями.

Примечание: Это свойство принадлежит CSS3, что пока не поддерживается Internet Explorer . Тем не менее, большинство других современных браузеров поддерживают CSS3.