56. clip-path и shape-outside

CSS: clip-path и shape-outside - Создаем необычные формы

В этом уроке мы изучим, как создавать нестандартные формы для элементов с помощью CSS свойств clip-path и shape-outside. Эти свойства позволяют нам выйти за рамки привычных прямоугольников и создавать визуально интересные и сложные дизайны.

clip-path: Обрезаем видимость элемента

Свойство clip-path позволяет обрезать часть элемента, делая видимой только определенную область. Это достигается путем определения фигуры, которая определяет видимую область. Все, что находится за пределами этой фигуры, становится невидимым.

Пример:

<div class="clipped">
  Этот текст будет отображаться только в пределах заданной формы.
</div>

.clipped {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  clip-path: circle(50%); /* Обрезает элемент в круг */
}

В этом примере мы обрезали div в круг, указав clip-path: circle(50%). 50% означает, что радиус круга равен 50% от ширины или высоты элемента (в данном случае, они одинаковы).

clip-path может принимать различные значения, включая:

• circle(): Создает круг.
• ellipse(): Создает эллипс.
• polygon(): Создает многоугольник, определяемый координатами вершин.
• inset(): Создает прямоугольник, обрезанный от краев.

Пример с polygon():

.clipped {
  width: 200px;
  height: 200px;
  background-color: lightgreen;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Создает треугольник */
}

Здесь мы создали треугольник, указав координаты трех его вершин.

shape-outside: Обтекание текста вокруг нестандартных форм

Свойство shape-outside позволяет тексту обтекать элемент, имеющий нестандартную форму. В отличие от clip-path, которое влияет на видимость элемента, shape-outside влияет на то, как другие элементы располагаются вокруг него.

Пример:

<img src="image.jpg" class="shaped">
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

.shaped {
  width: 150px;
  height: 150px;
  float: left; /* Важно для обтекания */
  shape-outside: circle(50%); /* Текст обтекает круг */
  margin-right: 10px;
}

В этом примере текст обтекает изображение, имеющее круглую форму, благодаря shape-outside: circle(50%). Как и clip-path, shape-outside принимает значения circle(), ellipse(), polygon() и другие. Важно отметить, что для работы shape-outside элемент должен быть плавающим (float: left или float: right).

Жизненный пример

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

shape-outside часто используется в блогах и новостных сайтах, чтобы текст красиво обтекал изображения, создавая более привлекательный и профессиональный вид. Также это свойство используется в дизайне журналов и других печатных изданиях, перенесенных в веб.

Многие современные CSS фреймворки и библиотеки компонентов используют эти свойства для создания более гибких и настраиваемых элементов интерфейса.

Ключевые моменты

• clip-path обрезает видимость элемента, создавая нестандартные формы.
• shape-outside определяет форму, вокруг которой обтекает текст.
• Оба свойства поддерживают различные формы, такие как круги, эллипсы и многоугольники.
• Для работы shape-outside элемент должен быть плавающим (float).
• Эти свойства позволяют создавать визуально интересные и сложные дизайны.

Интерактивный пример