text-shadow в CSS 3: создание эффекта тени текста используя стили слоя в Photoshop

В последнее время все больше и больше web сайтов начинают использовать стили, добавленные в третьей версии каскадных таблиц стилей CSS. Одним из таких стилей является CSS свойство «text-shadow». Оно позволяет задавать текстовому слою эффект тени. В этой статье мы коснемся вопроса создания эффекта тени текста в Photoshop и переноса этого эффекта в CSS верстку сайта.

Чтобы создать эффект тени в Photoshop, создайте новый текстовый слой и откройте окошко с эффектами кликнув в контекстном меню на Blending Options.

В списке слева выберите эффект Drop Shadow.

Здесь вы можете изменять значения таких параметров тени, как:

  • Shadow color (цвет тени)
  • Opacity (прозрачность)
  • Angle (угол падения света)
  • Distance (расстояние)
  • Spread (распространение)
  • Size (размер)

Значения только этих параметров могут быть перенесены в CSS верстку текстовых слоев сайта. Будьте внимательны, ипользуйте опцию Blending Mode только со значением Normal. Также используйте значения по умолчанию для остальных опций:

  • Use Global Light (использовать глобальный источник света) — включено
  • Contour (контур) — прямой (как на изображении выше)
  • Anti-aliasing (сглаживание) — отключен

Теперь мы хотим написать CSS код, отвещающий за создание тени текста. Как это сделать проще всего? Наиболее легкий способ — с помощью сервиса автоматической блочной HTML верстки сайтов из PSD макета сгенерировать HTML/CSS код всего лишь за несколько минут. На автоматически созданной странице тексты будут иметь CSS стиль со свойствами тени, импортированными из Photoshop.

Надо отметить, что тень будет отображаться только в современных браузерах, поддерживающих CSS 3. Устаревшие браузеры просто проигнорируют сгенерированное CSS свойство и отобразят текст без тени. Также следует заметить, что разные браузеры могут реализовывать алгоритмы рисования тени немного по-разному, отчего тень с одними и теми же CSS свойствами будет отображаться по-разному в разных браузерах, скажем, в Safari и Firefox.

Share

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *