Красивое оформление обтекания текстом с CSS Shapes

04 сентября 2014

Стандартные спецификации CSS Shapes открывают широкие возможности для красивого оформления обтекания текстом на веб-страницах. Используя средства CSS, вебмастер может создавать произвольные формы, но это весьма трудоемкий процесс. Облегчить его призвано новое расширение для Google Chrome под названием CSS Shapes Editor. Новинка позиционируется разработчиком в качестве интерактивного редактора CSS Shapes, где для определения контуров достаточно перетягивать точки с помощью мыши.

По заданному вебмастером контуру программа сама определяет, какие значения присвоить параметрам circle(), ellipse(), insert() и polygon(). После установки CSS Shapes Editor в браузер, он встраивает новую вкладку в стандартную панель элементов.

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

Итоговую форму можно произвольно двигать, вращать и масштабировать на свое усмотрение. Чтобы изменить пикселы на другие единицы измерения в свойствах элемента, достаточно нажать на форму зажав кнопку Shift. Иногда таким нехитрым способом удается немного подкорректировать CSS-контур.

Кстати, CSS Shapes Editor подходит и для работы с CSS-масками (в частности, со свойством clip-path).