logo

Свойство clip-path

Свойство clip-path можно применять ко всем элементам HTML, а также графическим элементам SVG и элементам-контейнерам SVG. Оно позволяет «обрезать» элемент практически любой формы. Это может быть отсечение прямоугольной формы, в виде круга или овала, а также фигура произвольной формы — много-много-многоугольник.

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

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

В этой статье мы будем «рвать» картинку на 2 части, причем линию разрыва можем выбирать различной формы. Все начинается с HTML-кода. Через тег figure прописываем 2 одинаковые картинки, каждую из них будем обрезать по своим параметрам и 2 SVG — прямоугольника, которые за счет width= «0» и height= «0» невидимы. Каждой SVG-картинке задаем свой идентификатор.


<figure id="halve_x">
  <figcaption>Вулкан не дремлет</figcaption>
  <img src="img_1.jpg" alt="">
  <img src="img_1.jpg" alt="">
</figure>

<svg id="svghalve_x" width="0" height="0">
  <defs>
    <clipPath id="tophalf" clipPathUnits="objectBoundingBox">
      <polygon points="0 0,1 0,1 .5,0 .5" />
    </clipPath>
    <clipPath id="bottomhalf" clipPathUnits="objectBoundingBox">
      <polygon points="0 .5,1 .5,1 1,0 1" />
    </clipPath>
  </defs>
</svg>

В таблице стилей прописываем необходимые параметры.


#halve_x {
  position: relative;
  width: 750px;
  height: 421px;
  margin: 40px auto;
  overflow: hidden;
  background: url(img_2.jpg);
  background-size: cover;
}
     /* Размещаем оба изображения внутри <figure> */
#halve_x img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: 2s ease-in-out;
}
     /* Делим каждое из изоброжений попалам */
#halve_x img:first-of-type {
  clip-path: url(#tophalf);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
#halve_x img:last-of-type {
  clip-path: url(#bottomhalf);
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
     /* При наведении каждая из половинок трансформируется по своим параметрам */
#halve_x:hover img:first-of-type {
  transform: translateY(-45%);
}
#halve_x:hover img:last-of-type {
  transform: translateY(45%);
}
     /* Параметры надписи */
#halve_x figcaption {
  position: absolute;
  top: 0;
  padding:3% 0;
  font-size:60px;
  text-shadow: 2px 2px 5px #111;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
}

На этом можно было и закончить, если бы не одно НО.
На примере 1, когда «линия раздела» проходит практически по линии горизонта и поэтому «теряется» в пестроте красок. Но стоит «линию раздела» сдвинуть немного выше или ниже увидим перфорированную линию ( состоит из множества «дырочек», через которые просматривается изображение, которое открывается при наведении). Это хорошо просматривается на примерах 2 и 3, если их задавать по той же схеме, что и пример 1.

Для того, чтобы избавиться от этой проблемы добавим еще одно изображение между уже заданными, которое скроет «перфорацию»


<figure id="halve_x">
  <figcaption>Вулкан не дремлет</figcaption>
  <img src="img_1.jpg" alt="">
  <img src="img_1.jpg" alt="" class="opasity">
  <img src="img_1.jpg" alt="">
</figure>
......

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


#halve_x img.opasity{
  transition:2s cubic-bezier(1,.01,.96,.06);
}
#halve_x:hover img.opasity {
  opacity: 0;
  transition: .1s ;
}

«Линию разрыва» можно задавать какой угодно, все зависит от желания и возможностей верстальщика. Виды трансформации изображения ограничены только фантазией разработчика, можно применить не только плоскостные, но и 3D-трансформации.

Вот один из вариантов для 2 примера.


#halve_diagonal:hover img.halve__img:first-of-type {
  transform:scale3d(0,1,-1);
}
#halve_diagonal:hover img.halve__img:last-of-type {
  transform: scale3d(1,0,0);
}

Остается пожелать творческих успехов.

Как это выглядит в реальности можете посмотреть на демо-странице.


Практические примеры 0

Рекомендую прочитать...

Бегущая строка при помощи анимации на CSS3
Бегущая строка на CSS3

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

Читать полностью
Необычное превью для «Главной»
необычное превью для главной

Страница на которой выводятся превью статей, размещенных на сайте, обычно именуется «Главной». Чаще всего превью статьи выглядит так: заголовок статьи, небольшая картинка — миниатюра, и небольшой текст в котором, либо начало статьи, либо краткое содержание статьи и кнопочка — ссылка типа «Читать далее», ведущая на страницу со статьей. Ниже представлена несколько иная «подача» превью статьи. Здесь миниатюра совмещена с кратким анонсом статьи

Читать полностью
Свойство box-shadow
Свойство box-shadow

Раньше, для того, чтобы какому нибудь объекту на сайте добавить тень приходилось прибегать к помощи Photoshop-а или другого графического редактора. Тень добавляли в изображение или использовали как фоновый слой.
Потом эти картинки вырезались и вставлялись на страницу сайта. Но чем больше различных картинок содержалось на сайте, тем медленный сайт работал.

Читать полностью

Всего комментариев: 0

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

Ваш email не будет опубликован.