CSS text-shadow

zALEHANz

Постоялец
Регистрация
26 Апр 2015
Сообщения
98
Реакции
39
Для просмотра ссылки Войди или Зарегистрируйся
Столкнулся с проблемой, в примере четко видно, что тень от первой буквы "т" находится ниже второй буквы "е". Тень от третей буквы "к" находится выше второй буквы "е".
Как можно сделать, что бы вторая буква была выше или ниже теней от первой и третей буквы.
Колдовал и с display:inline-block, и с z-index. Ничего не помогло.
 
Работает только в таком виде Для просмотра ссылки Войди или Зарегистрируйся
Использовал position:absolute
Но это ужасное решение, для каждого нового текста потребуется указание своих отступов.
Упс. Когда написал, увидел ответ от ultra. Спасибо! Все время забываю, про эту фишку с relative, несмотря на то, что она по умолчанию у всех блоков, без явного вызова работает не так как нужно.

UPD Для просмотра ссылки Войди или Зарегистрируйся
При position:relative даже без z-index тень уходит на задний план. При указании z-index для светящегося текста выше чем для черного, тень все равно оказывается на заднем плане. Можно ли сделать, что бы тень оказалась на переднем плане, окрашивая черную букву?

В общем получилось создать нужный эффект. Правда с дикими извратами)))
Для просмотра ссылки Войди или Зарегистрируйся
Весь текст пришлось обернуть в спаны. Я так понял тень от родительского тега не может лечь на контент дочернего. При оборачивании в спаны появились отступы между буквами, пришлось использовать маржины. абзац пришлось сделать блоком и добавить внутреннюю тень, что бы черная буква не сливалась с черным фоном.
Может кто предложит более изящный вариант?
 
Последнее редактирование:
Да, изящно, но увы использовать прозрачность по ряду причин нельзя, да и эффект не тот. Самый замечательный эффект как раз в самом первом примере. Вот только тень отбрасывается только от третей буквы на вторую, ощущается объем, будто буква просто погасла. Как сделать, что бы такая же тень падала и с первой буквы на вторую?
 
вы напоминаете адового клиента - "хочу, чтобы черный кот в черной комнате - отбрасывал собственную тень, от отраженного света собственных глаз и мяукал, если интенсивность отраженного света правого глаза превышает интенсивность левого"

решение без opacity - Для просмотра ссылки Войди или Зарегистрируйся

да и эффект не тот
нарисуйте, что вы хотите получить в итоге, так как решение с opacity, визуально, полностью соответствует вашему "не элегантному" решению из третьего поста

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

я бы мог извратиться с градиентами, но мне кажется - вы заигрались в верстку
 
вы напоминаете адового клиента - "хочу, чтобы черный кот в черной комнате - отбрасывал собственную тень, от отраженного света собственных глаз и мяукал, если интенсивность отраженного света правого глаза превышает интенсивность левого"
Красиво:ay:Я бы лучше и не сформулировал!
я бы мог извратиться с градиентами, но мне кажется - вы заигрались в верстку
Именно! Часами могу ковыряться пока не получу нужного мне эффекта. Помимо удовлетворения от результата, получаю нехилую прокачку навыков;)
Вот так реализовал. Для просмотра ссылки Войди или Зарегистрируйся
ultra, спасибо за участие.
Кстати, изврат с градиентами, имеете ввиду background-clip:text?
UPD Да, через градиент получается интересный эффект Для просмотра ссылки Войди или Зарегистрируйся
 
Последнее редактирование:
Назад
Сверху