Форма и глубина вашей разметки при помощи Photoshop’а и CSS Shapes

Форма и глубина вашей разметки

От автора: В текущую реализацию 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

Сначала мы возьмем исходную разметку страницы и модифицируем ее так, чтобы она обернулась вокруг изображения без тени.

#gears
{
    float: left;
    shape-outside: url("gears.png");
}
 ...

Так как исходное изображение имело прозрачный фон, форма определяется как контур шестеренок. С помощью shape-outside, как мы видим, текст оборачивается вокруг шестеренок, как здесь:

С помощью shape-margin можно определить, насколько близко вам требуется обернуть текст вокруг изображения. По умолчанию shape-margin установлен на none, что в данном случае дает оборачивание текстом слишком близко к шестеренкам. Это можно соответственно отрегулировать:

#gears
{
    float: left;
    shape-outside: url("gears.png");
    shape-margin: 10px;
}

Вот так гораздо лучше:

Но вместо определения shape-margin: 10px; я бы лучше применила ранее созданное нами изображение с падающей тенью и дала возможность тени в альфа-канале определить контур формы.

#gears
{
    float: left;
    shape-outside: url("gears-dropshadow.png");
}
...

Получится вот что:

Вот и все. Всего за несколько простых шагов мы добавили плоской прямой разметке глубины и яркости, использовав классное новое свойство CSS.

Если вам интересно, как в точности мы считаем форму из изображений, прочтите об алгоритме определения первого подходящего расположения формы изображения в блоге Ганса Мюллера (Hans Muller).

Автор: Rebecca Hauck

Источник: http://blogs.adobe.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree