—»     —»   Создаем врезанный текст посредством CSS3
  Раздел: CSS/Style Sheets   Нет комментариев  

Создаем врезанный текст посредством CSS3

Разработчиками браузеров были введены новые функции CSS3, которые дают возможность реализовывать самые неожиданные фантазии в области веб-дизайна даже без применения изображений, javascript или flash. Чем больше людей увлекаются CSS3, тем больше различных вариантов применения вы можете наблюдать на веб-сайтах, а иногда можете встретить то, что даже не могли себе представить ранее.

В данной статье мы рассмотрим использование тени текста (text-shadow) – эффекта, который поддерживается в Firefox, Opera и Safari. Его обычно используют для оформления врезанного текста. Врезанный текст представляет собой подобие вдавленного в фон текста.

Эффект, который мы собираемся сделать

Создаем врезанный текст посредством CSS3

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

Этап 1. Основной цвет текста

Первым делом нам надо сделать цвет текста немного темнее, чем цвет фона, на котором он будет расположен. Это создаст эффект, как будто текст расположен дальше, чем фон. Уровень затемнения оттенка зависит от того, какие цвета вы используете на странице. Советуем вам использовать Photoshop для подбора правильных цветов и теней.

Этап 2. Цвет выступа

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

Этап 3. Код

.inset-text {
          font-size: 32px;
          color: #344251;
          text-shadow: 1px 1px 0px #bad3ed;
          font-weight: bold;
     }

Код очень прост, нам просто нужно применить свойства text-shadow с линией в 1 пиксель на тексте и 1 пиксель под ним, а также 1 пиксель с правой стороны.

Результат

Вот вам пример того, что должно получиться. Если у пользователя нет поддержки свойства text-shadow, то они все равно смогут прочесть текст без труда.

Создаем врезанный текст посредством CSS3
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 8906   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2019    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031