Главная » HTML5 » clip-path - примеры использования
36 0  

clip-path - примеры использования

5.0 ☑ ☒

Свойство CSS clip-path создает область отсечения, которая устанавливает, какая часть элемента должна отображаться.

Нужно помнить что части находящиеся внутри области - отображаются, а те, что снаружи, скрыты.

clip-path - примеры использования winked По сути мы должны указать координаты точек, через запятую, по которым произойдет обрезка.

Способы которыми можно сделать обрезку:

/* Keyword values */
clip-path: none;

/* <clip-source> values */ 
clip-path: url(imag.png);

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

Формы могут быть созданы с помощью функций фигур в модуле CSS Shapes.

Популярные функции формы:

  • {clip-path: circle(40%);}
  • {clip-path: ellipse(130px 140px at 10% 20%);}
  • {clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);}


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

 

Плюсы

  • Браузеры, которые не поддерживают свойство clip-path, будут его игнорировать. Если вы используете свойство осторожно, пользователи с неподдерживаемыми браузерами ничего не заподозрят!
  • После создания обтравочного контура спецификация заявляет, что события указателя не должны отправляться за пределы области отсечения (что идеально). Таким образом, события щелчка ограничены фигурой и её внешней границей.
  • Вы можете использовать проценты или любую единицу длины, например пиксели или em, для определения координат базовых фигур с помощью CSS. Гибкие единицы, такие как проценты, могут использоваться для создания отзывчивых фигур, идеально подходящих для адаптивных макетов.

Програмы для генирации фигур "clip-path"

- https://bennettfeely.com/clippy/

- http://www.cssplant.com/clip-path-generator



Самый яркий пример - это создание треугольника, не обичным методом, а через clip-path:

Пример №1 - треугольника:

img { clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}

Пример того что можно сделать:

Пример 1

Пример 2

Исполняемый код:

<div> <h1>Пример 1</h1> <img class="imgtreygoln" src="/uploads/bilorys.jpg" alt=""> <style> .imgtreygoln { clip-path: polygon(50% 0%, 0% 100%, 100% 100%);} </style> </div> <div> <h1>Пример 2</h1> <style> .svg-clipped { -webkit-clip-path: url(#svgPath); clip-path: url(#svgPath); } </style> <img class="svg-clipped" src="/uploads/bilorys.jpg" alt=""> <svg height="0" width="0"> <defs> <clipPath id="svgPath"> <circle stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="40"/> <circle stroke="#000000" stroke-miterlimit="10" cx="193.949" cy="235" r="74.576"/> <circle stroke="#000000" stroke-miterlimit="10" cx="426.576" cy="108.305" r="47.034"/> <circle stroke="#000000" stroke-miterlimit="10" cx="346.915" cy="255.763" r="43.644"/> <circle stroke="#000000" stroke-miterlimit="10" cx="255.39" cy="82.882" r="35.17"/> <circle stroke="#000000" stroke-miterlimit="10" cx="328.695" cy="157.034" r="25.424"/> <circle stroke="#000000" stroke-miterlimit="10" cx="594.797" cy="360.424" r="121.187"/> <circle stroke="#000000" stroke-miterlimit="10" cx="470.008" cy="223.771" r="31.992"/> <circle stroke="#000000" stroke-miterlimit="10" cx="299.525" cy="400.762" r="64.407"/> <circle stroke="#000000" stroke-miterlimit="10" cx="634.627" cy="183.305" r="92.373"/> <circle stroke="#000000" stroke-miterlimit="10" cx="136.746" cy="172.712" r="106.356"/> <circle stroke="#000000" stroke-miterlimit="10" cx="91.831" cy="416.779" r="36.017"/> <circle stroke="#000000" stroke-miterlimit="10" cx="125.305" cy="335" r="25.424"/> <circle stroke="#000000" stroke-miterlimit="10" cx="192.424" cy="421.271" r="20.509"/> <circle stroke="#000000" stroke-miterlimit="10" cx="184.847" cy="362.543" r="18.22"/> <circle stroke="#000000" stroke-miterlimit="10" cx="436.568" cy="385.602" r="72.635"/> <circle stroke="#000000" stroke-miterlimit="10" cx="345.644" cy="90.085" r="23.729"/> <circle stroke="#000000" stroke-miterlimit="10" cx="534.627" cy="85" r="42.373"/> <circle stroke="#000000" stroke-miterlimit="10" cx="426.305" cy="12.017" r="83.898"/> <circle stroke="#000000" stroke-miterlimit="10" cx="277.458" cy="314.694" r="22.068"/> <circle stroke="#000000" stroke-miterlimit="10" cx="413.229" cy="195.381" r="22.669"/> <circle stroke="#000000" stroke-miterlimit="10" cx="277.848" cy="185" r="16.949"/> <circle stroke="#000000" stroke-miterlimit="10" cx="493.102" cy="158.729" r="19.492"/> <circle stroke="#000000" stroke-miterlimit="10" cx="424.517" cy="290.873" r="24.517"/> <circle stroke="#000000" stroke-miterlimit="10" cx="71.067" cy="348.56" r="49.152"/> <circle stroke="#000000" stroke-miterlimit="10" cx="737.221" cy="62.915" r="50.898"/> <circle stroke="#000000" stroke-miterlimit="10" cx="740" cy="430" r="50" /> </clipPath> </defs> </svg> </div>

 

Дополнительная информация:


https://www.w3.org/TR/css-masking-1/


 
 Chrome  Edge  Firefox  Internet  Opera  Safari
55 12 3.5 10 49 9.1
 
 Android  Chrome  Edge  Firefox  Opera  Safari  Samsung
55 55 ? 4 42 9.3 6

Проверить на сайте developer.mozilla.org

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020