Как сделать текст с применяемыми стилями фотошопа.

[Raura]

Здравствуйте веб – мастера. Подскажите как сделать текст как и в psd файле с помощи css. В psd к тексту применяется обводка, тиснение и внутренне свечение.

Пробовал задать text-shadow но эффект был не тот как в psd.

Может есть еще css свойства, которые могут решить данную задачу?

Вот ссылка http://datapic.ru/?v=13-04-03_gGMwtcPYvfAEoA4bwkMujkfvS.png

Edited April 3, 2013 by Raura

[wwt]

комбинируем несколько теней, что-то типо http://jsfiddle.net/x77aS/

[Great Rash]

Кроссбраузерно никак. Особенно если обводка шире 1-го пикселя.

[wwt]

ну вообще да, если нужно кроссбраузерно то лучше картинками и реализовать.

[Raura]

комбинируем несколько теней, что-то типо http://jsfiddle.net/x77aS/

Спасибо огромное!

Тени подбираються с помощи редактора?

[wwt]

комбинируем несколько теней, что-то типо http://jsfiddle.net/x77aS/

Спасибо огромное!

Тени подбираються с помощи редактора?

Цвет можете хоть методом тыка подбирать, а вот сдвиги и радиус ручками. Вообще почитайте про это свойство. И не забывайте что это свойство не кроссбраузерно.

[Raura]

Кроссбраузерно никак. Особенно если обводка шире 1-го пикселя.

chrome, opera, firefox, safari +

ie9 -

Что ж он такой не дружелюбный )

Edited April 3, 2013 by Raura

[Zippovich]

http://www.hintzmann.dk/testcenter/js/jquery/textshadow/ - для IE

[Vin]

Обводку текста легко сделать с помощью SVG и это настоящая, аккуратная обводка, а не кривая, как в случае с имитацией через text-shadow.

http://jsfiddle.net/villard/b3cyx/

Недостатки: IE 9+ и такой текст не будет автоматически переноситься, хотя, может быть, есть обходной путь через VML. Маску для текста с помощью SVG тоже можно сделать, но только для вебкитов.

Edited April 3, 2013 by Vin

[Great Rash]

У SVG с честной обводкой тоже проблемы: http://jsfiddle.net/b3cyx/2/

[Vin]

У SVG с честной обводкой тоже проблемы: http://jsfiddle.net/b3cyx/2/

Не, ну обводка в 5px для Georgia normal такого размера — конечно, перебор. Вот так будет нормально http://jsfiddle.net/villard/v8MT6/

По крайней мере, обводка чёткая, с помощью text-shadow такого не сделать, потому что данное CSS-свойство предназначено именно для теней.

P.S. Недавно подобный вопрос уже был. В итоге автор пришёл к использованию Cufon. К сожалению, сходу ссылку не найду.

[Николя223]

комбинируем несколько теней, что-то типо http://jsfiddle.net/x77aS/

Спасибо огромное!

Тени подбираються с помощи редактора?

как уже написали, если нужен кросс, то делайте картинками, если текста немного и всю красоту нужно сохранить только лучше будет если и настоящий текст также прописывать) насколько я понимаю - вот старинный способ)

http://jsfiddle.net/kJV3d/

либо так http://jsfiddle.net/8qNMn/, только не знаю как поисковики отнесутся к скрытому содержимому((

Edited April 3, 2013 by Николя223

[Raura]

Всем большое, чистосердечное спасибо! )

С наружной тенью разобрались, а вот как насчет внутреннего свечения?

В фотошопе такой эффект придает тексту объем (выпуклым или вогнутым), чего не делает наружная тень.

И можно ли наложить градиент на текст? Пробовал задавать его, но он применяется к фону.

[Vin]

Вы покажите, что должно получиться.

[Great Rash]

Не, ну обводка в 5px для Georgia normal такого размера — конечно, перебор.

Перебор или не перебор должен решать не разработчик стандарта, а конечный юзер, т.е. дизайнер или верстальщик. Суть в том, что в фотошопе можно задать расположение обводки (внутри, снаружи или по-центру объекта), а в SVG и в CSS (надеюсь пока) этого сделать нельзя. А значит инструмент кастрированный, а значит это опять хаки, костыли и ухищрения.

Градиент на тексте сделать нельзя примите это как данность.

Вообще можно, но только в WebKit. И неизвестно можно ли объединить градиент и обводку, т.к. используется свойство clip... Вообще надо бы поиграться.