Подробно о CSS Shapes

Возможности HTML5 и CSS3 не перестают нас радовать новыми полезными спецификациями. В этой статье мы рассмотрим возможности CSS Shapes с кучей маленьких демо, чтобы помочь вам понять как это работает.

Обычно текст на странице обтекает элементы строго соблюдая границы. Цель синтаксиса CSS Shapes разместить текст вокруг края элемента в более произвольной форме. Спецификация CSS Shapes во многом напоминает CSS masking , применяется для отсечения фрагментов формы.

Поддержка браузерами CSS Shapes

В настоящее время спецификацией CSS Shapes работает в следующих браузерах:

  • Хром 34+ с особым пунктом (см. ниже)
  • Chrome Canary
  • WebKit Nightly

Для того, чтобы увидеть примеры на этой странице и по экспериментировать с спецификацией CSS Shapes, необходимо убедиться, что вы используете нужный браузер.

Если Вы используете Chrome (не Chrome Canary), вставьте в адресную строку ссылку:



chrome://flags/#enable-experimental-web-platform-features


Затем в пункте Включить экспериментальные функции веб-платформы нажмите кнопку Включить . Чтобы браузер начал понимать новую спецификацию CSS его нужно перезапустить, для этого внизу браузера под предложением Внесенные изменения станут активны после перезапуска Google Chrome нажмите кнопку .

Свойство shape-outside

Первое что мы рассмотрим — это свойство shape-outside . Применяется для определения формы обтекания вокруг границы изображения в виде прямоугольника, круга, многоугольника или эллипса. Свойство shape-outside отсекает фрагменты границы изображения (области) для заполнения их текстом.

Первый и очень простой пример выглядит так:

Простой пример размещение текста с правой стороны
Простой пример размещение текста

Если добавить свойство CSS shape-outside к изображению:



img {
  float: left;
  shape-outside: inset(1% round 45%);
}


Пример (round)

Пример CSS Shapes (round)

Для этого примера используется блок с изображением яблока. Изображение размером 250px на 250px, то есть квадрат, без границы вокруг области изображения. Изображению добавлено свойство shape-outside: inset(1% round 45%) , поэтому текст обтекает изображение с правой стороны не соблюдая границы.


Строки текста будут продолжается внизу под изображением.

В результате область изображения становится закруглённой, это придаёт особый веб-дизайн для содержимого сайта.

Вы наверное заметили что яблоко на изображении не целое (от кусано), почему, возможно знает Джобс . Но, а наша задача сделать обтекание текста произвольной формы. Для того чтобы (от кусаное) место яблока на изображении заполнилось текстом, мы используем свойство shape-outside с функцией polygon() .

Функция polygon()

Функция polygon() имеет значение координат из которых можно создать любую фигуру, что позволит сделать обтекание текста даже в самые необычные формы!

Координаты могут быть в пикселях или в процентах:



shape-outside: polygon(x1 y1, x2 y2, x3 y3, x4 y4, x5 y5);


Пример (polygon)

Пример CSS Shapes (polygon)

Для этого примера используется блок с изображением яблока. Изображение размером 250px на 250px, то есть квадрат, без границы вокруг области изображения. Изображению добавлено свойство shape-outside: polygon () , поэтому текст обтекает изображение с правой стороны не соблюдая границы.


Строки текста будут продолжается внизу под изображением.

Сделать фигуру по координатам вершин не просто!

Согласен. Когда дело доходит до не ровных изображений, сделать произвольную форму сложно, особенно при использовании процентов. Для этого есть инструмент CSS Shapes Editor который помогает построить любую фигуру.

Инструмент CSS Shapes для построения произвольной формы
Инструмент CSS Shapes для построения формы

Если вам не нужны сложные формы, есть простой онлайн-инструмент Polygon Drawing который поможет создать форму многоугольника.

Какие формы возможны

Свойство shape-outside позволяет использовать несколько различных функций для определения формы:

inset()

Функция inset() позволяет определить прямоугольник внутри обтекаемой области. Это полезно, если нужно что бы на прямоугольном изображение находился текст. Например там где много свободного места или на изображении изначально продумана разметка для текста.

Разместить текст в верхнею, правую, нижнюю и левую позицию прямоугольника, так же просто, как определить отступы:



shape-outside: inset(10px, 5px, 10px, 5px);


Функцией inset() можно заменить отступы margin/padding.

Прямоугольник с отступом в 1% от границ элемента:



shape-outside: inset(1%);


А еще прямоугольнику можно добавить стили border-radius , чтобы закруглить углы.

Если добавить в “round” а затем указать размер с помощью обычного синтаксиса border-radius , вышеупомянутый бокс будет с закруглёнными углами. Смотрите пример с round выше.

Код, приведенный ниже, делает изображение с закруглёнными углами с учетом отступа от края нашего изображения на 1%:



shape-outside: inset(1% round 10px);


В примере радиус закругляется до 45%:



shape-outside: inset(1% round 45%);


Закруглить для каждого угла можно по разному. В следующем примере кода, верхний левый угол закруглён на 5px, верхний справа 10px, справа внизу 5px, и внизу слева 5px:



shape-outside: inset(1% round 5px 10px 5px 5px);


Но это не всё, кодом ниже можно сделать фигуру тестом:



shape-inside: polygon(0px, 150px);


circle()

Если видимое изображение круглое, можно сделать обтекание текста по кругу добавив функцию circle() вот так:



shape-outside: circle();


Вот как это работает:

Пример (circle)

Пример CSS Shapes (circle)

Для этого примера используется снимок планеты Марс. Снимок планеты Марс с размерами 250px на 250px, то есть квадрат. Снимку планеты Марс добавлено свойство shape-outside: circle() . В результате текст обтекает снимок с левой стороны соблюдая простую форму круга. Если функция circle() не содержит значение, размеры изображения могут быть различные. Для правильного обтекания текста видимая область изображения должна быть круглой.

Параметры радиуса круга

Радиус круга Вы можете указать в первый аргумент функции circle() .

По умолчанию, радиус круга — это 50% от ширины изображения:



shape-outside: circle(50%);


Чтобы была половина ширины обтекаемой области нужно указать радиус 25%:



shape-outside: circle(25%);


Для определения радиуса окружности есть два более новые свойства: closest-side и farthest-side они определяют, каким образом браузер должен делать радиус окружности, используя границы самого элемента. Значение не имеет смысла если изображение квадрат, но для прямоугольного элемента значение смысл иметь будет.

Значение closest-side вычисляет радиус окружности от края элемента ближе к центру. По своей сути circle() эквивалентен circle(closest-side) .

Для прямоугольного элемента используем следующие:



shape-outside: circle(closest-side);


Аргумент closest-side функции  circle() делает круг плотно прилегающим к центру изображения.

Аргумент  farthest-side наоборот вычисляет радиус окружности подальше от центра. Если мы имеем прямоугольный элемент с отрезанными верхом и низом круга, нужно использовать для функции circle() значение farthest-side :



shape-outside: circle(farthest-side);


Пример (farthest-side)

Пример CSS Shapes (farthest-side)

Для этого примера используется снимок планеты с размерами 250px на 167px, где вырезан верх и низ снимка. Изображение обведено границей красного цвета в 1px. Поскольку снимок планеты имеет форму прямоугольника было добавлено значение farthest-side . В результате текст обтекает снимок с левой стороны… Радиус окружности отдален от центра видимой части снимка.

Сместить центр круга

Чтобы сместить центр круга достаточно написать ключевое слово в какую сторону нужно смещать центр круга. Это для тех случаев, когда круг не точно в центре изображения, или сделать полукруг от края до края. Например, если изображение высокое:



shape-outside: circle(farthest-side at left);


Мы можем сделать полукруг, центр которого находится в левой части изображения высота которого совпадает с высотой элемента:

Пример (farthest-side at left)

Для этого примера используется часть снимка планеты. Полный размер изображения составляет 192px на 400px, где высота снимка больше в два раза, чем ширина. Для изображения добавлено значение farthest-side at left , это значение смещает центр окружности в левую сторону. В результате смещения центра окружности, текст обтекает снимок с правой стороны повторяя контур окружности. В этом примере высота текста совпадает с высотой изображения.

Можно много использовать разных значений для изменения положения центра круга. Теоретически, все что относится к CSS position должно работать, например:



shape-outside: circle(closest-side at center);
shape-outside: circle(closest-side at 10% 10%);
shape-outside: circle(closest-side at center);


Указав радиус окружности можно добиться нужного положения центра круга. Для эксперимента создайте полукруг в половину меньше шириной, центр которого находится с левого края (0) и 25% сверху:



shape-outside: circle(25% at 0 25%);


ellipse()

Если нужно сделать форму овала, а не круга, лучше использовать функцию ellipse() . Что бы применять эту функцию, высота и ширина изображения должна иметь эллипс. Значения для радиуса по оси X и оси Y помогут Вам определили радиус.

Функция ellipse() без значений:



shape-outside: ellipse();


В результате получаем:

Пример (ellipse)

Пример CSS Shapes (ellipse)

Для этого примера используется рисунок моста в известном городе во всем мире, Рим. Когда-то давно римляне завоеватели мир, большой город Рим был столицей римской империи. Рисунок моста в Риме с размерами 193px на 283px (эллипс). Для изображения добавлена функция shape-outside: ellipse() . В результате текст обтекает снимок с левой стороны повторяя форму эллипса.

Меняем размеры эллипса

Мы можем сделать форму эллипса разного размера, так же как и определение радиуса окружности, есть всего два значения: для ширины и высоты:



shape-outside: ellipse(25% 10%);


Еще можно определить ширину и высоту двумя значениями closest-side и farthest-side , так же как мы это делали с circle , используем два значения: одно для ширины и одно для высоты:



shape-outside: ellipse(closest-side closest-side);


Сместить центр эллипса

Методы для смещения центра эллипса и смещение центра круга одинаковые:



shape-outside: ellipse(25% 10% at 0 25%);


Фигуры из изображения

Еще одна замечательная особенность синтаксиса CSS Shapes заключается в использовании Альфа-канала (прозрачность). Если у Вас есть изображение в формате PNG или GIF, вы можете определить обтекаемую область. Это просто сделать с помощью двух строк:



shape-outside: url(img.png);
shape-image-threshold: 0.0;


URL как изображение background-image что создаёт дополнительный запрос HTTP!

Свойство shape-image-threshold определяет уровень непрозрачности, значения такие же как в свойстве CSS opacity; значение 0.0 полностью прозрачно, 1.0 — полностью непрозрачный.

В примере, часть изображения прозрачная поэтому значение 0.0 :

Свойство shape-image-threshold
Свойство shape-image-threshold для изображения

Пример кода выше:

Пример (shape-image-threshold)

Пример CSS Shapes (shape-image-threshold)

этом примере используется частично прозрачный рисунок. Рисунок находится на удалённом сервере что бы избежать ошибки Cross-Origin Resource Sharing в браузере. Рисунку присвоено свойство shape-image-threshold и значение прозрачности 0.0 . В результате текст обтекает рисунок с правой стороны заполняя прозрачную область рисунка.

удостоверьтесь, что это на удаленном веб-сервере, чтобы избежать какой-либо путаницы над тем, почему это не работает!

Фигурные границы

Еще один способ определить обтекаемую область это указать границы для блока. Также можно закруглить углы границ для определения обтекаемой области.

Картинка ниже показывает различные модели границ в CSS:

Модели границ для блока
Модели границ блока
  • Синяя граница — margin-box . Это отступ от элемента снаружи границ блока.
  • Черная граница — border-box . В примера выше, мы получим границу вокруг блока 2px.
  • Оранжевая зона — padding-box . Это граница, которая находится в самом блоке.
  • Само изображение находится в content-box .

Вы можете использовать эти границы для обтекаемой области вот так:



shape-outside: margin-box;
shape-outside: border-box;
shape-outside: padding-box;
shape-outside: content-box;


Это зависит от того, где и когда будет переноситься строка текста. Если определить shape-outside как margin-box , то текст будет обтекать с внешнего края границы. Если определить как border-box он будет ближе к краю границы, и так далее …

Один из простых примеров использовать это, нужно определить обтекаемую область закругляя углы (как мы это делали с inset но немного проще в реализации и сопровождении). Этот код CSS добавит отступ 5px между изображением и текстом, обтекание текста будет вокруг изображения у которого радиус 150px:



border-radius: 150px;
margin: 5px;
shape-outside: margin-box;


Результат выглядит следующим образом:

Пример (margin-box)

Пример CSS Shapes (margin-box)

В этом примере используется случайный рисунок. Рисунку присвоено свойство shape-outside: margin-box и border-radius для закругления углов. В результате текст обтекает рисунок с правой стороны заполняя внешнею область рисунка. Такое расположение текста добавит уникальный дизайн.

Тот же эффект будет с border-box , padding-box и content-box — меняется только расположение текста.

Свойства shape-margin

Есть возможность добавить место вокруг определенных участков обтекаемой фигуры, чтобы текст не попадал на изображение. Это удобно в тех случаях, когда не используется значения для фигуры.

В спецификации говорится, что можно использовать значение длины (например px, em, rem и др.), проценты, или значение функции calc() . В настоящее время только Chrome Canary поддерживает проценты, а Chrome поддерживает длину и значение функции calc() кроме процентов.

Несколько примеров:



shape-margin: 10px;
shape-margin: 1em;
shape-margin: 5%;
shape-margin: calc(2em - 1px);


Заключение

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

Если хотите узнать больше о спецификации CSS-shapes , смотрите следующие ссылки:

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

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

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