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, которое позволяет это сделать.

Читать полностью
Анимация SVG — иконок
Анимация SVG-иконок

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

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

Практически на любом сайте Вы найдете хотя бы одну кнопку. Это может быть кнопка «Поиск», или «Скачать», или «Читать полностью», или какая то другая.
Ранее в качестве кнопок использовался ссылка-рисунок. При наведении на нее курсора одна картинка замещалась другой, чтобы создать иллюзию движения. В настоящее время с помощью CSS3 появилась возможность создавать всевозможные кнопки совершенно не используя картинки.

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

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

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

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