От автора: В текущую реализацию Webkit’ом спецификации CSS Shapes мы добавили поддержку shape-outside с помощью изображения как значения. В данном случае вместо определения формы с помощью функции basic-shape форма высчитывается из альфа-канала изображения с порогом непрозрачности, конфигурируемым с помощью shape-image-threshold. Применив изображение с прозрачным фоном, можно использовать CSS Shapes для заливки текста вокруг определенной им произвольной формы.
Поведение по умолчанию – это определить форму как область(и) изображения с непрозрачностью более 0% с тем, чтобы даже полупрозрачные области, такие как падающие тени, были частью формы. В этой статье я покажу вам, как создать изображение и определить падающую тень в его альфа-канале с помощью Photoshop’а, а затем использовать его в CSS Shapes для создания глубины и контура в данной простой разметке энциклопедии.
Определение формы в альфа-канале с помощью Photoshop’а
Начнем с того, что откроем это простое изображение в Photoshop’е.
1. Создайте новый слой и назовите его shadow. Мы создадим в нем падающую тень, поэтому переместите его под основное изображение.
2. Заполните слой черным цветом и установите непрозрачность заполнения на 50%
3. Выбрав слой тени в панели слоев, выберите изображение с помощью инструмента Quick Selection/Быстрый выбор. Щелкните кнопку Refine Edge/Уточнить край и установите Feather/Перо на 5px.
4. Создайте новую Layer Mask/Маску слоя. С помощью инструмента Move/Переместить настройте слой тени так, чтобы тот был снизу и справа.
Переключитесь на панель Channels/Каналы и отыщите новый альфа-канал, созданный из маски слоя. Это и есть форма, вокруг которой зальется текст с помощью CSS Shapes.
Сохраните изображение как PNG.
Оборачивание текста вокруг изображений с помощью CSS Shapes
Сначала мы возьмем исходную разметку страницы и модифицируем ее так, чтобы она обернулась вокруг изображения без тени.
|
1 2 3 4 5 6 |
#gears { float: left; shape-outside: url("gears.png"); } ... |
Так как исходное изображение имело прозрачный фон, форма определяется как контур шестеренок. С помощью shape-outside, как мы видим, текст оборачивается вокруг шестеренок, как здесь:
С помощью shape-margin можно определить, насколько близко вам требуется обернуть текст вокруг изображения. По умолчанию shape-margin установлен на none, что в данном случае дает оборачивание текстом слишком близко к шестеренкам. Это можно соответственно отрегулировать:
|
1 2 3 4 5 6 |
#gears { float: left; shape-outside: url("gears.png"); shape-margin: 10px; } |
Вот так гораздо лучше:
Но вместо определения shape-margin: 10px; я бы лучше применила ранее созданное нами изображение с падающей тенью и дала возможность тени в альфа-канале определить контур формы.
|
1 2 3 4 5 6 |
#gears { float: left; shape-outside: url("gears-dropshadow.png"); } ... |
Получится вот что:
Вот и все. Всего за несколько простых шагов мы добавили плоской прямой разметке глубины и яркости, использовав классное новое свойство CSS.
Если вам интересно, как в точности мы считаем форму из изображений, прочтите об алгоритме определения первого подходящего расположения формы изображения в блоге Ганса Мюллера (Hans Muller).
Автор: Rebecca Hauck
Источник: //blogs.adobe.com/
Редакция: Команда webformyself.
