Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

От box-shadow к text-shadow

.

Наши друзья-дизайнеры любят создавать макеты с эффектами тени, отбрасываемой панелями, блоками, разделами и т. д. Но еще больше они любят применять этот эффект к тексту. Что ж, и такое можно реализовать с помощью CSS. Знакомьтесь — свойство text-shadow!

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

В файл styl el. ess добавьте следующий код (неважно где):

Затем сохраните его и посмотрите, как выглядит сайт (рис. 9.16). Выглядит ужасно? Да, пожалуй. Хорошо, что это работает, но вот вам живой пример, что свойство text-shadow, несмотря на простоту применения, может скорее ухудшить вид текста и его зрительное восприятие.

Рис. 9.16. Пример, когда тень от текста только ухудшает вид страницы

По моему опыту, тень от текста имеет право на жизнь, если вы задаете маленькие значения смещений по вертикальной и горизонтальной осям, небольшое значение размытия и неконтрастный цвет (синтаксис этого правила тот же, что и для свойства box-shadow). Зато, если применить такое свойство к кнопкам и подобным элементам, можно добиться эффекта выпуклости или вогнутости.

Добавим еле заметный эффект тени к тексту в навигационном меню, чтобы сделать его еще заметнее на темно-синем фоне. В файле styl el. ess найдите правило, которое определяет стиль блока навигации (ищите новый селектор HTML5 — nav). Добавьте туда следующий код:

Сохраните таблицу стилей, а затем посмотрите на страницу в браузере (помните, что я удалил подчеркивание с помощью свойства text-decorati on: none, так как подчеркивающая линия тоже отбрасывала бы тень, а это было бы чересчур). Ну что, ваш блок навигации похож на изображенный на рис. 9.17?

Рис. 9.17. Еле заметная тень дает эффект глянца

Нужно добавить еще совсем немного — отключить тень при наведении на ссылку указателя мыши. На проектном сайте текст выбранной ссылки станет белым на синем фоне. Поскольку тень тоже белая, текст получится нечетким (рис. 9.18).

Рис. 9.18. При наведении указателя мыши на ссылку вместо глянца получается расплывчатый эффект

Это очень легко исправить (а результат показан на рис. 9.19):

Рис. 9.19. Теперь при наведении указателя мыши тень исчезает и читать текст куда легче

.

Читайте так же:
Not found