Форма і глибина вашої розмітки за допомогою photoshopу і CSS Shapes

13

Від автора: В поточну реалізацію Webkit’ом специфікації CSS Shapes ми додали підтримку shape-outside з допомогою зображення як значення. В даному випадку замість визначення форми з допомогою функції basic-shape форма вираховується з альфа-каналу зображення з порогом непрозорості, конфігуровані з допомогою shape-image-threshold. Застосувавши зображення з прозорим фоном, можна використовувати CSS Shapes для заливки тексту навколо певної їм довільної форми.

Поведінку за промовчанням – це визначити форму як область(і) зображення з непрозорістю більше 0% з тим, щоб навіть напівпрозорі області, такі як падаючі тіні, були частиною форми. У цій статті я покажу вам, як створити зображення і визначити падаючу тінь в його альфа-каналі за допомогою photoshop’у, а потім використовувати його в CSS Shapes для створення глибини і контуру у даній простий розмітці енциклопедії.

Форма і глибина вашої розмітки за допомогою photoshopу і CSS Shapes

Визначення форми в альфа-каналі за допомогою photoshop’у

Почнемо з того, що відкриємо це просте зображення в Photoshop е.

Форма і глибина вашої розмітки за допомогою photoshopу і CSS Shapes

1. Створіть новий шар і назвіть його shadow. Ми створимо в ньому падаючу тінь, тому перемістіть його під основне зображення.

Форма і глибина вашої розмітки за допомогою photoshopу і CSS Shapes

2. Заповніть шар чорним кольором і встановіть непрозорість заповнення на 50%

Форма і глибина вашої розмітки за допомогою photoshopу і CSS Shapes

3. Вибравши шар тіні в панелі шарів, виберіть зображення за допомогою інструменту Quick Selection/Швидкий вибір. Клацніть кнопку Refine Edge/Уточнити край і встановіть Feather/Перо на 5px.

Форма і глибина вашої розмітки за допомогою photoshopу і CSS Shapes

4. Створіть нову Layer Mask/Маску шару. За допомогою інструменту Move/Перемістити налаштуйте шар тіні так, щоб той був знизу і праворуч.

Форма і глибина вашої розмітки за допомогою photoshopу і CSS Shapes

Перейдіть на панель Channels/Канали і відшукайте новий альфа-канал, створений з маски шару. Це і є форма, навколо якої заллється текст за допомогою CSS Shapes.

Форма і глибина вашої розмітки за допомогою photoshopу і CSS Shapes

Збережіть зображення PNG.

Обернення тексту навколо зображень за допомогою CSS Shapes

Спочатку ми візьмемо початкову розмітку сторінки і модифікуємо її так, щоб вона обернулася навколо зображення без тіні.

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

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

Форма і глибина вашої розмітки за допомогою photoshopу і CSS Shapes

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

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

Ось так набагато краще:

Форма і глибина вашої розмітки за допомогою photoshopу і CSS Shapes

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

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

Вийде ось що:

Форма і глибина вашої розмітки за допомогою photoshopу і CSS Shapes

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

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