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

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

Градиент в качестве границы блоков
Граница блока - градиент

Обычно границы задаются цветом, причем каждая из границ может иметь свой цвет. Для того, чтобы границы имели плавные переходы от цвета к цвету из макета сайта вырезались картинки и вставлялись в код страницы.
Попробуем решить задачу современными средствами верстки. В CSS3 есть такое свойство как linear-gradient, с помощью которого можно осуществить нашу задумку.

Читать полностью
3D-трансформация в примерах
3d трансформация в примерах

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

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

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

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

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

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

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