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