В последнее время все больше и больше 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.
