Edit Shape Paths в CSS

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

The Shape Path Editor - это инструмент, который поможет вам увидеть и редактировать фигуры, созданные с помощью clip-path, а также свойство CSS shape-outside и <basic-shape>. В этом руководстве вы найдете все доступные варианты.

Активация / деактивация Shape Path Editor

The Shape Path Editor доступен через панель правил CSS, которую можно открыть, как описано в руководстве Opening the Inspector. После того как вы выбрали свой элемент, вы увидите значок формы рядом с любым допустимым значением, например один для shape-outside.

Щелчок по иконке заставит Редактор выделить фигуру.

Чтобы отключить Shape Path Editor, щелкните по иконке еще раз или выберите другой элемент или другой редактор. Обратите внимание, что Shape Path Editor не сохраняется между перезагрузкой страницы - если вы перезагрузите страницу, вам нужно будет снова выбрать элемент.

Понимание строк, нарисованных редактором

После того, как вы выбрали фигуру на своей странице, редактор путей будет рисовать линии, которые помогут вам понять путь, который создается.

  • Сплошная линия показывает контур фигуры, которая обертывает текст. Это ваша форма. Если форма обрезается по margin box, то margin box будет составлять часть этой строки.
  • Пунктирная линия демонстрирует контур формы, которая проходит мимо ссылки margin box; это область, которая будет обрезана по margin box. Чтобы понять margin box и другие поля, используемые формулой CSS, см. Shapes from box values.

Редактирование основных фигур

Параметры, предоставленные вам инструментом, будут различаться в зависимости от типа базовой формы, которую вы редактируете. Доступ к параметрам можно получить, активировав Shape Path Editor с помощью обычного щелчка по иконке, и вы можете использовать контекстное меню (Ctrl/Cmd + щелчёк) для доступа к дополнительным функциям.

circle()

Если значение shape-outside равно circle(), значит вы создаете circle basic shape. При нажатии на иконку формы рядом со значением circle() будет выделена фигура, а также вы можете изменить размер круга или перемещать его центр. Если вы перемещаете или изменяете размер круга за пределами поля, края становятся обрезаны им.

В панели правил вы можете увидеть значения для circle() при изменении формы. Затем вы можете скопировать эти значения обратно в таблицу стилей, чтобы создать новый, измененный путь формы.

ellipse()

Если значение shape-outside равно ellipse(), значит вы используете ellipse basic shape. Значение ellipse() работает так же, как circle() в Shape Path Editor. Эллипс представляет собой сжатый круг и, следовательно, имеет возможность изменять размер по горизонтали и вертикали, когда вы нажимаете на значок фигур.

inset()

Если значение shape-outside равно inset(), значит вы используете inset basic shape, которая позволяет создавать значения смещения, вытягивая содержимое из margin box.

Каждая сторона прямоугольника может быть нацелена после нажатия на значок формы, чтобы активировать Shape Path Editor, и перетаскивание каждой стороны будет обновлять значения для top, right, bottom, и left смещяя значения.

polygon()

Если значение shape-outside равно polygon(), значит вы используете polygon basic shape. Это самый сложный из основных значений формы, поэтому инструмент дает вам больше возможностей при их редактировании:

  • Нажатие на значок формы активирует Shapes Path Editor и дает вам возможность перемещать любую из точек вашей фигуры многоугольника.
  • Дважды щелкните в любом месте линии формы, и вы получите новую точку для настройки.
  • Дважды щелкните по существующей точке, и она будет удалена. Помните, что многоугольник должен содержать не менее трех точек.

Перемещение и масштабирование фигур

Есть дополнительные функциональные возможности, доступные на выделенной фигуре - если вы нажмете Ctrl/Cmd + щелчек на значок фигуры для своей фигуры, подсветка изменится, вместо этого будет возможность масштабировать и / или перемещать ее. Еще раз, произойдет отсечение, если вы превысите границы margin box.

Если ваша форма является многоугольником, вы также получаете возможность вращать ее вокруг оси.

Поддержка браузера

The Shape Path Editor в настоящее время работает для форм, сгенерированных с помощью clip-path; он также будет работать для форм, созданных с помощью shape-outside с Firefox 62.

Метки документа и участники

Внесли вклад в эту страницу: Shychara
Обновлялась последний раз: Shychara,