Свойство clip-path и модальное окно

Cвойство clip-path

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

При помощи этого свойства возможно задать границу практически любой конфигурации. Итак, начинаем.В начале, как обычно создаем HTML- разметку: Это обычный список и в качестве примера возмем только один элемент списка, остальные идентичны за исключением текста подписи и картинки.

<ul>
 <li>
  <a class="link" href="#modal" title="Москва - cтолица России">
   <div class="mask">
    <img class="min" src="images/moskow_min.png" alt="Москва">
   </div>
   <span class="title">Moscow </span>>
   <span class="overlay"></span>
   <span class="icon"></span>	
  </a>
 </li>
....
</ul>

• a class = "link" — обычная ссылка, при клике по которой открывается модальное окно (об этом ниже).
• div class = "mask" — блок, в котором размещена картинка. .
• span class = "title" — текст подписи.
• span class = "overlay" — элемент, затемняющий картинку при наведении.
• span class = "icon" — иконка лупы, появляющаяся при наведении.

В таблице стилей задаем размеры, положение и главное границы, в которых ограничивается рисунки. Точно такие границы прописываем ссылке и области затемнения при наведениии. При необходимости работы с рисунками других размеров нужно просто изменить задаваемую высоту и ширину и скорректировать положение надписей. Границы заданы в процентах и поэтому не нуждаются в корректировке. Если же наоборот необходимо изменить форму, заданную границами, то меняются значения свойства clip-path

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

ul{
  margin: 20px auto;
  padding: 15px 0;
}
li{
  width:180px;
  height:180px;
  overflow:hidden; 
  position:relative; 
  display:inline-block; 
  margin: 0 10px;
}
.mask{
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.link{ 
  display:block;
  text-decoration:none;
  cursor:pointer;
  transition: all .3s;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.min{
  display:block;
  width: 178px;
  height: 178px;
}
.title{
  cursor:pointer;
  position:absolute;
  width:178px;
  padding:5px 0;
  color:#ffffff; 
  font-size:18px;
  text-align:center;
  left:0px;
  top:128px;
  background:rgba(17, 17, 17, 0.6);
}
.overlay{
  cursor:pointer;
  opacity:0;
  width:178px;
  height:178px;
  position:absolute;
  left:0;
  top:0;
  background: transparent;
  transition: all .3s;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);	
}
.link:hover .overlay{
  opacity:1; 
  background:rgba(17, 17, 17, 0.5);
}
.icon{
  display:block;
  opacity:0; 
  position:absolute;
  width:32px;
  height:32px;
  left:74px; 
  top:74px;
  transition: all .3s;
  background-image:url(images/lupa32x32.png)
}
.link:hover .icon{
  opacity:1;
}

Модальное окно

Для работы модального окна использован скрипт remodal.js. Более подробно с ним можно ознакомитья на Github. Сам скрипт и таблица стилей находятся в папке dist, скачиваем и подключаем их к себе на сайт.

<!--   В теге head  -->
<link rel="stylesheet" href="../remodal.css">
<link rel="stylesheet" href="../remodal-default-theme.css">
.....
<!--В конце тега body-->
<script src="../remodal.min.js"></script>

Естественно указывая реальные пути. Не забываем подключить библиотеку Jquery.

В любом месте HTML-документа прописываем:

<div class="remodal" data-remodal-id="modal">
<!-- Содержимое модального окна-->
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal>/h1>
  <p>
    Responsive, lightweight, fast, synchronized with CSS animations.... 
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>	

Содержимое модального окна может быть любым, содержащим необходимую в данном случае информацию.
Наличие всех трех кнопок также зависит от необходимости в каждом конкретном случае. Удаление любой (любых) из них никах не повлияет на работу скрипта. В нашем примере это выглядит так:

<div class="remodal" data-remodal-id="modal" data-remodal-options="closeOnOutsideClick: false, closeOnEscape: false">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h4 class="remodal__h4">Москва - столица России</h4>
  <img src="images/moskow.png" alt="Москва">
</div>

Т.е создаем обычный блок с классом "remodal" и атрибутом data-remodal-id = "modal", которому присваиваем произвольное имя, в данном случае это modal. Это же имя присваиваем и ссылке, которая открывает данное окно. В нашем примере это:

<a class="link" href="#modal" title="Москва - cтолица России">

Если есть необходимость работы нескольких модальных окон, то каждой из них прописывается атрибут data-remodal-id = "…." со своим именем, соответственно и ссылка должна иметь то же имя.

В том случае, если для вызова модального окна используется элемент, отличный от ссылки, то к этому элементу применяется не href = "#modal" , а атрибут data-remodal-target = "modal" (для ссылки этот атрибут также работает).

По умолчанию модальное окно можно закрыть кликнув на любую из кнопок, нажав на клавиатуре клавишу Esc или кликнув в любом месте окна браузера. В своем примере я оставил только «крестик»- закрыть.

Для того, чтобы модальное окно можно было закрыть не любым способом, а каким то конкретно служит атрибут data-remodal-options с помощью которого можно задать дополнительные параметры — опции.

• closeOnConfirm — закрывает модальное окно после нажатия кнопки подтверждения.
• closeOnCancel — закрывает модальное окно после нажатия на кнопку отмены.
• closeOnEscap — закрывает модальное окно после нажатия клавиши Esc.
• closeOnOutsideClick — закрывает модальное окно, щелкнув в любом месте на странице.

По умолчанию у них прописано значение true , изменив которое на значение false , изменяем варианты закрытия модального окно. Изменения делаются в HTML -документе, т.е в сам скрипт вносить изменения не придется. Один из возможных вариантов:

<div class="remodal" data-remodal-id="modal" data-remodal-options="closeOnOutsideClick: false, closeOnEscape: false">

Обещанная ссылка на скачивание — архив на Яндекс-Диске