Ресурсы, инструменты и вдохновение

  • «CSS Masking Module Level 1», W3C
    Это основной источник истины и лучшее руководство при сомнениях.
  • «Clipping in CSS and SVG: The clip-path Property and <clipPath> Element», Сара Суэйдан
    Суэйдан написала исчерпывающее руководство по обтравочным контурам. Хотя основное внимание уделяется SVG, эта статья представляет собой фантастическое введение, с подробной информацией для читателей среднего и продвинутого уровня.
  • «clip-path», Сара Суэйдан, Codrops
    Хорошо проработанная и всеобъемлющая статья на Codrops разбивает довольно сложный модуль на части, которые легко понять и усвоить.
  • «Clipping and Masking in CSS», Крис Койер, CSS-Tricks
    Статья Койера, усеянная некоторыми полезными демонстрациями, объясняет одновременно отсечение и маскирование.
  • Clippy
    Генератор clip-path от Беннетта Фели может создавать множество предустановленных и пользовательских многоугольников, кругов и эллипсов для clip-path. Все значения указываются в процентах и, следовательно, полезны для адаптивных макетов.
  • Clip Path Generator
    Сайт CSS Plant предлагает довольно продвинутый графический интерфейс для обрезания или маскирования элемента. Кроссбраузерная поддержка предоставляется для Firefox, Chrome, Safari и старых iOS. Значения указываются в пикселях, а не в процентах.
  • Species in Pieces
    Эта изумительная и душевная презентация, показывающая 30 видов животных, находящихся под угрозой исчезновения, сделана полностью на clip-path без помощи канваса или WebGL. Просмотрите её в браузере WebKit или Blink, пока другие не наверстают упущенное.

Карен Менезес

Фрилансер, разработчик адаптивных пользовательских интерфейсов, страстно любит CSS. Без ума от городского садоводства, городской флоры, альтернативных методов лечения и создания новых рецептов. Живёт в Мумбаи.