CSS: Обводка букв

bruder · Отправлено: **16:37, 10-03-2008** | #2

такое невозможно с css, если только поэкспериментировать с тенью и то изврат и результат плохой, хотя в определенных случаях может пригодится. Лучше конечно картинкой или использовать специальные шрифты с обводкой, которые динамично подгружать с сервера. Но все это я бы стал делать только в крайнем случае

Код:

<html>
  <head>

<style type="text/css">
.shadow {
  font:bold italic 44px times new roman,georgia,arial,verdana;
  color:000;
  padding:0;
  margin:0;
  white-space:nowrap;
}
.shadow:before {
  color:#aaa;
  content:"HALLO";
  display:block;
  margin:0 0 -57px 4.5px;
}

</style>
<!--[if IE]>
<style type="text/css">
.shadow {
  FILTER:progid:DXImageTransform.Microsoft.dropshadow
  (OffX=3, OffY=4, Color='#aaaaaa', Positive='true');
  HEIGHT:0;
}
</style>
<![endif]-->

  </head>
  <body>
  <h2 class="shadow">HALLO</h2>
</body>
</html>

Coutty · Конфигурация компьютера

Картинкой я хотел, но у меня весьма специфичный скрипт, съедающий ужасно много процессорного времени (да что там, 100%). Причём с картинкой анимация раз в десять медленнее. Поэтому остановился на текстовой анимации.
Эффект тени в даном случае не подходит. Поскольку читаемость его даже пониже получается.

А вот вариант с загружаемым шрифтом мне нравится. Но только что за шрифт такой (и где можно достать, и как его применить

)? Мне не попадались...
Скрипт не для массового доступа, поэтому трафик (в разумных пределах) роли не играет.

bruder · Отправлено: **21:34, 10-03-2008** | #4

извиняюсь что не сказал сразу, подгрузка пашет только в IE, потому тоже отстой. тут пара примеров, причем тут же можешь убедится в ff не пашет. Оптимизируй картинки или попробуй с флеш (по данным сайта нашей фирмы используют флеш 98% юзеров)

Coutty · Конфигурация компьютера

Мдя, похоже, что это IEonly.
Картинок там всего две. Одна стоит на месте, а другая по идее собирается из множества мелких фрагментов при помощи canvas.drawImage();
В общем-то, там всё на canvas'е нарисовано, поэтому переделывать на флэш не могу... Да и нет у меня флэш-редактора под linux=( Так-то да, было бы разумнее сразу на флэше делать. Но как знать, может быть он с 500 объектами справился ещё хуже, чем canvas

dmitryst · Конфигурация компьютера

Coutty, а если делать два текста - на переднем плане поменьше, а на заднем побольше(обводка, то есть)? Правда, с кернингом придется повозиться... чтобы буквы в слове более-менее совпадали. Или вообще выводить побуквенно

Coutty · Конфигурация компьютера

dmitryst, собственно, побуквенно оно и выводится

Надо попробовать. Как бы только совместить?..

Совместил. Ужасно

Лучше подобрать цвет, одинаково контрастный к белому и тому, другому =\