Смещение вниз на небольшое расстояние и сильное размытие
Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
3D текст от Mark Dotto
Эффект используется на сайте MarkDotto.com. В нем используется 12 различных теней для создания отличного эффекта 3D.
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
Вдавленный текст от Gordon Hall
Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.
Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
Шаг 4
Чтобы посмотреть, как выглядит сетка с разных углов, Вы можете взять инструмент Move Tool, нажать “Current View” на панели 3D, затем нажать и потащить на пустую область, чтобы покрутить нашу сцену.
Лучше двигать сцену (вид через камеру) вместо того, чтобы двигать саму сетку. Это поможет предотвратить любые ненужные изменения в освещении.
Если Вы хотите передвинуть сетку, убедитесь, что это постоянное изменение (не для временного изменения угла зрения). Затем нажмите на сетке в 3D сцене (или выберите её название на панели 3D), и, используя оси 3D, проведите нужные изменения.
Стрелки на концах осей перемещают сетку, часть под ними используется для вращения, а квадраты для масштабирования. Квадрат в центре используется для равномерного масштабирования. Все, что Вам нужно, это просто нажать и потянуть на нужной части.
Это может показаться довольно сложным в начале, и предметы начнут летать по всему документу, но со временем и по мере получения опыта Вы научитесь работать в 3D пространстве.
Вы также можете ввести нужные значения, чтобы изменить настройки. Просто нажмите на иконке Coordinates на панели настроек, затем поменяйте значение X Rotation сетки 3D на 90°.
Это действие повернет сетку так, что она будет смотреть вверх.
Вы заметите, что сетка как бы парит в воздухе. Чтобы исправить это, перейдите в 3D -> Snap Object to Ground Plane.
Вдавленный текст
С помощью свойства text-shadow можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.
Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.
Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.
body {
background: #222;
}
#text h1 {
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}
Шаг 2
При выделенном текстовом слое, переходим в меню Type -> Extrude to 3D. Это действие конвертирует текст в 3D сетку.
Чтобы получить доступ к настройкам и установкам 3D сетки, Вам необходимо открыть две панели: панель 3D и панель Настроек (обе панели можно найти в меню Window).
Панель 3D включает все компоненты 3D сцены, и когда Вы нажмете на названии любого из них, Вы сможете получить доступ к его настройкам на панели Настроек. Поэтому убедитесь, что Вы всегда выбираете наименование того элемента, который Вы хотите модифицировать на панели 3D перед тем, как менять его настройки на панели Настроек.
В новой среде 3D в CS6 нет специфических инструментов 3D. Если Вы выберете инструмент Move Tool и проверите панель настроек, Вы найдете набор 3D моделей справа от панели. Когда Вы выберете одну из них, Вы сможете нажать и потянуть для применения любых изменений (к выделенному элементу панели 3D).
Основы использования теней
Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr, которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.
Синтаксис
Для создания тени текста используется синтаксис свойства text-shadow, который приводится ниже. Нужно определить четыре параметра: первые два задают положение тени, третий устанавливает уровень размытия, а четвертый определяет цвет тени.
text-shadow: смещение_по_горизонтали смещение_по_ вертикали размытие цвет;
Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
Результат использования данного свойства будет выглядеть следующим образом:
Почему используется rgba?
Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени — уровень прозрачности.
Данный метод существенно проще, чем другие способы определения цвета
Вам не надо акцентировать внимание на определении оттенка цвета тени, который может быть лишь немного темнее или светлее цвета фона. С rgba вы можете просто использовать белый или черный цвета и увеличить их прозрачность, чтобы добиться нужного оттенка фона при смешении красок
