Войти

Показать полную графическую версию : CSS: Обводка букв

Coutty
10-03-2008, 14:18
Можно ли средствами CSS выполнить обводку букв? Скажем, сами буквы белые, а линия обводки синяя.
Достаточно, чтобы было совместимо с Firefox.
bruder
10-03-2008, 16:37
такое невозможно с 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
10-03-2008, 18:07
Картинкой я хотел, но у меня весьма специфичный скрипт, съедающий ужасно много процессорного времени (да что там, 100%). Причём с картинкой анимация раз в десять медленнее. Поэтому остановился на текстовой анимации.
Эффект тени в даном случае не подходит. Поскольку читаемость его даже пониже получается.

А вот вариант с загружаемым шрифтом мне нравится. Но только что за шрифт такой (и где можно достать, и как его применить:))? Мне не попадались...
Скрипт не для массового доступа, поэтому трафик (в разумных пределах) роли не играет.
bruder
10-03-2008, 21:34
извиняюсь что не сказал сразу, подгрузка пашет только в IE, потому тоже отстой. тут (http://www.woweb.ru/publ/26-1-0-579) пара примеров, причем тут же можешь убедится в ff не пашет. Оптимизируй картинки или попробуй с флеш (по данным сайта нашей фирмы используют флеш 98% юзеров)
Coutty
10-03-2008, 22:31
Мдя, похоже, что это IEonly.
Картинок там всего две. Одна стоит на месте, а другая по идее собирается из множества мелких фрагментов при помощи canvas.drawImage();
В общем-то, там всё на canvas'е нарисовано, поэтому переделывать на флэш не могу... Да и нет у меня флэш-редактора под linux=( Так-то да, было бы разумнее сразу на флэше делать. Но как знать, может быть он с 500 объектами справился ещё хуже, чем canvas:)
dmitryst
10-03-2008, 23:09
Coutty, а если делать два текста - на переднем плане поменьше, а на заднем побольше(обводка, то есть)? Правда, с кернингом придется повозиться... чтобы буквы в слове более-менее совпадали. Или вообще выводить побуквенно
Coutty
11-03-2008, 08:36
dmitryst, собственно, побуквенно оно и выводится:) Надо попробовать. Как бы только совместить?..

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



© OSzone.net 2001-2012