text-shadow

Softlink · August 19, 2011

Привет!

Мне запотешилось сделать тень для букв внутри них. Т.е. получить эффект вдавленности. Как правило, такой эффект достигается добавлением белого text-shadow со сдвигом по y на 1пк вниз. При этом буквы должны быть темнее фона, в котором они находятся. Примерно как здесь: http://clip2net.com/s/17vZh

Однако у меня сложность в том, что буквы белые и на неоднородном фоне. Т.е. мне надо что-то подобное inset для box-shadow. Или может есть мысли как это сделать другим образом, т.е. поиграться с тенями и получить визуальный эффект того, что мне надо? У меня не хватило фантазии, какие цвета надо для этого использовать :unsure: Чтобы было понятнее, какой фон, сделал прототип http://jsfiddle.net/4dzYY/

Вот как здесь сделать эффект вдавленных букв?

psywalker · August 19, 2011

А я не понял, в чём трабл? Почему просто нельзя сдвинуть тень, куда нужно? text-shadow: 1px 1px 0 #999696;

Softlink · August 19, 2011

А я не понял, в чём трабл? Почему просто нельзя сдвинуть тень, куда нужно? text-shadow: 1px 1px 0 #999696;

Ну такой вариант делает буквы как раз объемными, а не вдавленными, попробуй.

Вот так получилось уже что-то похожее http://jsfiddle.net/4dzYY/1/

psywalker · August 19, 2011

Softlink,

Ааа, я понял. Я полагаю, что можно попробовать как-то сделать эмуляцию внутренней тени. Попробуй продолжить вот этот вариант.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
	h1{ font: bold 70px Verdana, Geneva, sans-serif; color: red;}



	h1 {text-shadow: -1px -1px 1px #000,-2px -2px 1px red}
</style>
</head>
<body>
	<h1>Заголовок</h1>
</body>
</html>

Softlink · August 19, 2011

Softlink,
Ааа, я понял. Я полагаю, что можно попробовать как-то сделать эмуляцию внутренней тени. Попробуй продолжить вот этот вариант.

Не, не то) Все равно объемные получаются. Я уже голову сломал с этими цветами и сдвигами. Однако есть какая-то уверенность, что это сделать можно. Использовать какие-то сдвиги специфичные, может наложение теней, да. Но, блин, у меня не хватает фантазии, как их наложить и сдвинуть))

Gaspode · August 19, 2011

Если фон светлый, то, по идее, тень должна быть тёмной и смещаться вверх, чтобы вдавленность получилась.

Так примерно:

div{
width:300px;
height:200px;
font-size:38px;
font-family:verdana;    
color: #eee;
background:orange;
line-height:180px;
text-align:center;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(orange));
background: -moz-linear-gradient(top, #fff, orange);
background: -o-linear-gradient(top, #fff, orange);
text-shadow: -1px -1px 1px rgba(0,0,0,.5);     
}

Edited August 19, 2011 by Gaspode

psywalker · August 19, 2011

Softlink,
Ааа, я понял. Я полагаю, что можно попробовать как-то сделать эмуляцию внутренней тени. Попробуй продолжить вот этот вариант.
Не, не то) Все равно объемные получаются. Я уже голову сломал с этими цветами и сдвигами. Однако есть какая-то уверенность, что это сделать можно. Использовать какие-то сдвиги специфичные, может наложение теней, да. Но, блин, у меня не хватает фантазии, как их наложить и сдвинуть))

Ну да, нужно как-то цвета подобрать правильные. :unsure:

Softlink · August 19, 2011

Если фон светлый, то, по идее, тень должна быть тёмной и смещаться вверх, чтобы вдавленность получилась.

Да, про то, что тень должна быть темней, это я тоже догадываюсь. Вроде бы любое смещение по x не подходит. Оно сразу выделяет тень за буквой и дает эффект объема.

p.s. так вы сразу-то и проверяйте на примере, я же специально его собрал, чтобы можно было поиграться

Gaspode · August 19, 2011

Вроде бы любое смещение по x не подходит. Оно сразу выделяет тень за буквой и дает эффект объема.

Ну я же дал код, там вдавленный текст. Если не видно, уберите градиенты на фоне сначала, посмотрите.

Softlink · August 19, 2011

Вроде бы любое смещение по x не подходит. Оно сразу выделяет тень за буквой и дает эффект объема.
Ну я же дал код, там вдавленный текст. Если не видно, уберите градиенты на фоне сначала, посмотрите.

Да ну, он явно не вдавленный http://jsfiddle.net/4dzYY/2/ , даже без градиентов.

Gaspode · August 19, 2011

Да это классический случай двойного восприятия просто. Это как если куб нарисовать сплошными линиями, без обозначения скрытых рёбер: он и выпуклый и вдавленный одновременно, зависит от того, как посмотреть. Здесь то же самое. Захотите увидеть вдавленный текст - увидите)

Edited August 19, 2011 by Gaspode

psywalker · August 19, 2011

Вроде бы любое смещение по x не подходит. Оно сразу выделяет тень за буквой и дает эффект объема.
Ну я же дал код, там вдавленный текст. Если не видно, уберите градиенты на фоне сначала, посмотрите.
Да ну, он явно не вдавленный http://jsfiddle.net/4dzYY/2/ , даже без градиентов.

А я вот по другому вижу. Выпуклость)

Gaspode · August 19, 2011

А я вот по другому вижу. Выпуклость)

Надо только захотеть

Softlink · August 19, 2011

Да это классический случай двойного восприятия просто. Это как если куб нарисовать сплошными линиями, без обозначения скрытых рёбер: он и выпуклый и вдавленный одновременно, зависит от того, как посмотреть. Здесь то же самое. Захотите увидеть вдавленный текст - увидите)

Да, я это понимаю, но все же он не вдавленный - это точно.

Вроде бы любое смещение по x не подходит. Оно сразу выделяет тень за буквой и дает эффект объема.
Ну я же дал код, там вдавленный текст. Если не видно, уберите градиенты на фоне сначала, посмотрите.
Да ну, он явно не вдавленный http://jsfiddle.net/4dzYY/2/ , даже без градиентов.
А я вот по другому вижу. Выпуклость)

да.

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

Nekromancer · August 19, 2011

Можно сделать, например значок скайпа так сделан. Но в фотошопе проще.

http://jsfiddle.net/NekR/4dzYY/6/

В общем так. Непрозрачность определят степень вдавленности.

Softlink · August 19, 2011

Можно сделать, например значок скайпа так сделан. Но в фотошопе проще.
http://jsfiddle.net/NekR/4dzYY/6/
В общем так. Непрозрачность определят степень вдавленности.

Ну в фотошопе можно много чего сделать, и CSS тогда не нужен будет))

Да, уже более похоже. Только цвет надо точно не серый.

Nekromancer · August 19, 2011

Там не серый, там белый и чёрный с прозрачностью. Вместо белого можно взять стандартный цвет свечения в фотошопе. Тогда должно получится лучше.

Максимум, что я родил - http://jsfiddle.net/NekR/4dzYY/7/

UPD

Чисто ради фана:

http://jsfiddle.net/NekR/4dzYY/12/

http://jsfiddle.net/NekR/4dzYY/13/ http://jsfiddle.net/4dzYY/28/

http://jsfiddle.net/NekR/4dzYY/15/

http://jsfiddle.net/NekR/4dzYY/31/

Softlink · August 19, 2011

Там не серый, там белый и чёрный с прозрачностью. Вместо белого можно взять стандартный цвет свечения в фотошопе. Тогда должно получится лучше.
Максимум, что я родил - http://jsfiddle.net/NekR/4dzYY/7/
UPD
Чисто ради фана:
http://jsfiddle.net/NekR/4dzYY/12/
http://jsfiddle.net/NekR/4dzYY/13/
http://jsfiddle.net/NekR/4dzYY/15/

Близко.

Спасибо всем за участие, будем еще подумать. Может еще посетит уникальная мысль

Softlink · August 19, 2011

http://jsfiddle.net/4dzYY/28/

Вот этот как раз смотрится вдавленным.

Ну и вдогонку http://jsfiddle.net/4dzYY/36/

Nekromancer · August 21, 2011

http://jsfiddle.net/rTp4U/

Вот чем люди занимаются ночью

Mozilla only.

Softlink · August 21, 2011

http://jsfiddle.net/rTp4U/
Вот чем люди занимаются ночью
Mozilla only.

Монстрячество)) Долго рисовал?

Nekromancer · August 22, 2011

ну часик на работе, часик ночью))

ViStefan · August 22, 2011

Ну и вдогонку http://jsfiddle.net/4dzYY/36/

Вот это круто. Кстати, свойств типа -webkit-transition-duration нет даже в справочнике на сайте. (В том числе и в разделе "по браузерам")...

Edited August 22, 2011 by ViStefan

Nekromancer · August 22, 2011

Чё крутого то?

https://developer.mozilla.org/en/CSS/CSS_transitions

ViStefan · August 22, 2011

Чё крутого то?
https://developer.mozilla.org/en/CSS/CSS_transitions

Круто то, что разработчики браузеров наконец то начали заботиться о разработчиках сайтов, и стали упрощать наш труд такими автоматизированными свойствами. Жаль что не все...

Sign In

text-shadow

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information