logo

Свойство 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">

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


Разное 0

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

Как изменить цвет изображения
как изменить цвет изображения

Как! Во многих интернет магазинах присутствует такая штука: цвет товара меняет свой цвет. Т.е. при клике на один из представленных цветов товар, как правило, это одежда, автомашина, чехлы для телефона или сам телефон меняет свою цветовую окраску. Со стороны кажется, что товар как бы заливается выбранным цветом, или приобретает тот орнамент ( часто представлены при […]

Читать полностью
Оформление кнопок на сайте
Кнопки для сайта

Продолжаем публикацию оформления кнопок для сайта. Сегодня рассмотрим кнопки с изменением внешнего вида при наведении в виде шторок и анимации текстового содержимого.

Как обычно, внешнее оформление, размеры, содержимое каждый выбирает сам, здесь задается только описание самого эффекта.

Читать полностью
Эффекты при оформлении текста
Свойство -webkit-text-stroke

Мы запросто можем задать границу блоку, рисунку, таблице, тексту. Именно тексту, но не каждой букве этого текста. Хотя стоит попробовать.

В спецификации CSS3 есть свойство -webkit-text-stroke, которое позволяет это сделать.

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

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

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

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