Гостевой вход

Вы не залогинились
01:01

Набор эффектов на CSS для модальных окон

Категория: Диалоги,overlay и lightbox

Метки: анимация, модальное окно
В этой подборке я хочу поделиться с вами различными вариантами переходов и анимаций для появляющихся модальных окон. Что есть, по-сути, модальное окно? Это - элемент графического пользовательского интерфейса, несущий в себе какую-либо информацию, и блокирующий своим появлением основной функционал сайта, покуда пользователь не закроет его.
Чтобы это окно не было сухим и скучным, сделаем его появление красивым и интересным!

Суть проста: нам необходима кнопка (либо любой иной элемент), по клику на которую произойдёт появление модального окна, сопровождающееся каким-то переходом или анимацией.

Обращаю ваше внимание, что работать такие эффекты будут только в современных браузерах, поддерживающих определённые CSS-свойства.

Рассмотрим, в общем, структуру нашего модального окна:

Код

<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Заголовок модального окна</h3>
<div>
КОНТЕНТ
<button class="md-close">Кнопка закрытия окна</button>
</div>
</div>
</div>

<div class="md-overlay"></div>

<button class="md-trigger" data-modal="modal-1">Кнопка открытия модального окна</button>


Для всех примеров, которые мы с вами тут сейчас рассмотрим, эта структура будет базовой, мы лишь будем менять класс md-effect для достижения различных эффектов открытия окна.
Например, md-effect-1 для первого варианта открытия окна, md-effect-2 для второго и т.д.

Вариант 1

Давайте, я возьму структуру модального окна прямо из моего первого демо-примера:

Код

  <div class="md-modal md-effect-1" id="modal-1">
  <div class="md-content">
  <h3>Модальный диалог</h3>
  <div>
  <p>Это модальное окно. С ним вы можете сделать следующее:</p>
  <ul>
  <li><strong>Читать:</strong> Модальное окно, видимо, хочет сообщить вам что-то важное, поэтому ознакомьтесь с его содержимым!</li>
  <li><strong>Смотреть:</strong> модальное окно привлекает ваше внимание, чтобы вы ощутили его присутствие.</li>
  <li><strong>Закрыть:</strong> Нажмите кнопку внизу, чтобы закрыть модальное окно.</li>
  </ul>
  <button class="md-close">Закрой меня!</button>
  </div>
  </div>
</div>

<div class="md-overlay"></div>

<button class="md-trigger" data-modal="modal-1">Открыть модальное окно</button>


Итак, разбираемся по-порядку. У нас есть блок div с классом md-modal и каким-то идентификатором (в данном случае, это id="modal-1").
Этот блок будет обёрткой для блока с содержимым модального окна (у него класс md-content). Важно, чтобы id блока-обёртки и значение для кнопки вызова окна (data-modal) было идентичным, в противном случае, вызова окна не произойдёт.

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

Далее, в коде вы видите блок div с классом md-overlay, это фоновая подложка, изначально скрытая, но появляющаяся при вызове модального окна. С помощью этой подложки, а точнее, свойства opacity, можно настроить видимость содержимого страницы сайта вне модального окна, а также цвет фона, как бы накладываемого сверху на страницу сайта.
Для чего это нужно? Это визуально еще более выделяет модальное окно на странице сайта, всё внимание обращается на него, за счёт скрытия (полного, либо частичного) родительских элементов страницы, ну и, само собой, даёт красивый эффект.

Посмотрите демо по ссылке ниже и вам всё станет сразу понятно.

Демо

Базовые CSS-стили, обязательные для всех вариантов, которые мы будем рассматривать:

Код


/* Это стили демо-страницы PS-Studio.Info, они не обязательны */
body {
  font-family: Arial, sans-serif;
  font-size:14px;
  color: #fff;
  background: #222;
}

a {
  color: #c0392b;
  text-decoration: none;
}

a:hover,
a:active {
  color: #333;
}

button {
  border: none;
  padding: 0.6em 1.2em;
  background: #6fb4ce;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 1em;
  letter-spacing: 1px;
  cursor: pointer;
  display: inline-block;
  margin: 3px 2px;
  border-radius: 2px;
}

button:hover {
  background: #5f9ab0;
}

/* А вот это обязательные стили */

.md-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 630px;
  min-width: 320px;
  height: auto;
  z-index: 2000;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateY(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -moz-transform: translateX(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateY(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -ms-transform: translateX(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateY(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  transform: translateX(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateY(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
}

.md-show {
  visibility: visible;
}

.md-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  background:#384a57;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.md-show ~ .md-overlay {
  opacity: 0.9;
  visibility: visible;
}

/* Content styles */

.md-content {
  color: #fcfcfc;
  background: #353c48;
  position: relative;
  border-radius: 3px;
  margin: 0 auto;
}

.md-content h3 {
  margin: 0;
  padding: 0.4em;
  text-align: center;
  font-size: 18px;
  font-weight: 300;
  opacity: 0.8;
  background:#2a3039;
  border-radius: 3px 3px 0 0;
}

.md-content > div {
  padding: 15px 40px 30px;
  margin: 0;
  font-weight: 300;
  font-size: 14px;
}

.md-content > div p {
  margin: 0;
  padding: 10px 0;
}

.md-content > div ul {
  margin: 0;
  padding: 0 0 30px 20px;
}

.md-content > div ul li {
  padding: 5px 0;
}

.md-content button {
  display: block;
  margin: 0 auto;
  font-size: 14px;
}


Индивидуальные CSS-стили для первого варианта (дополнительно к тем, что приведены выше):

Код

/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content {
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.md-show.md-effect-1 .md-content {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}


Вариант 2

Демо

Базовые стили плюс эти:

Код

/* Effect 2: Slide from the right */
.md-effect-2 .md-content {
  -webkit-transform: translateX(20 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -moz-transform: translateX(20 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -ms-transform: translateX(20 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  transform: translateX(20 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  opacity: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.md-show.md-effect-2 .md-content {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}


Вариант 3

Демо

Базовые стили плюс эти:

Код

/* Effect 3: Slide from the bottom */
.md-effect-3 .md-content {
  -webkit-transform: translateY(20 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -moz-transform: translateY(20 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -ms-transform: translateY(20 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  transform: translateY(20 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.md-show.md-effect-3 .md-content {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}


Вариант 4

Демо

Базовые стили плюс эти:

Код

/* Effect 4: Newspaper */
.md-effect-4 .md-content {
  -webkit-transform: scale(0) rotate(720deg);
  -moz-transform: scale(0) rotate(720deg);
  -ms-transform: scale(0) rotate(720deg);
  transform: scale(0) rotate(720deg);
  opacity: 0;
}

.md-show.md-effect-4 ~ .md-overlay,
.md-effect-4 .md-content {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

.md-show.md-effect-4 .md-content {
  -webkit-transform: scale(1) rotate(0deg);
  -moz-transform: scale(1) rotate(0deg);
  -ms-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
  opacity: 1;
}


Вариант 5

Демо

Базовые стили плюс эти:

Код

/* Effect 5: fall */
.md-effect-5.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px;
}

.md-effect-5 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(600px) rotateX(20deg);  
  -moz-transform: translateZ(600px) rotateX(20deg);  
  -ms-transform: translateZ(600px) rotateX(20deg);  
  transform: translateZ(600px) rotateX(20deg);  
  opacity: 0;
}

.md-show.md-effect-5 .md-content {
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transform: translateZ(0px) rotateX(0deg);
  -moz-transform: translateZ(0px) rotateX(0deg);
  -ms-transform: translateZ(0px) rotateX(0deg);
  transform: translateZ(0px) rotateX(0deg);  
  opacity: 1;
}


Вариант 6

Демо

Базовые стили плюс эти:

Код

/* Effect 6: side fall */
.md-effect-6.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px;
}

.md-effect-6 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate(30 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateZ(600px) rotate(10deg);  
  -moz-transform: translate(30 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateZ(600px) rotate(10deg);
  -ms-transform: translate(30 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateZ(600px) rotate(10deg);
  transform: translate(30 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateZ(600px) rotate(10deg);  
  opacity: 0;
}

.md-show.md-effect-6 .md-content {
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transform: translate(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateZ(0) rotate(0deg);
  -moz-transform: translate(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateZ(0) rotate(0deg);
  -ms-transform: translate(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateZ(0) rotate(0deg);
  transform: translate(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateZ(0) rotate(0deg);
  opacity: 1;
}


Вариант 7

Демо

Базовые стили плюс эти:

Код

/* Effect 7: slide and stick to top */
.md-effect-7{
  top: 0;
  -webkit-transform: translateX(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -moz-transform: translateX(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -ms-transform: translateX(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  transform: translateX(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
}

.md-effect-7 .md-content {
  -webkit-transform: translateY(-200 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -moz-transform: translateY(-200 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -ms-transform: translateY(-200 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  transform: translateY(-200 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  opacity: 0;
}

.md-show.md-effect-7 .md-content {
  -webkit-transform: translateY(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -moz-transform: translateY(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -ms-transform: translateY(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  transform: translateY(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  border-radius: 0 0 3px 3px;
  opacity: 1;
}


Вариант 8

Демо

Базовые стили плюс эти:

Код

/* Effect 8: 3D flip horizontal */
.md-effect-8.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px;
}

.md-effect-8 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(-70deg);
  -moz-transform: rotateY(-70deg);
  -ms-transform: rotateY(-70deg);
  transform: rotateY(-70deg);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}

.md-show.md-effect-8 .md-content {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  opacity: 1;
}


Вариант 9

Демо

Базовые стили плюс эти:

Код

/* Effect 9: 3D flip vertical */
.md-effect-9.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px;
}

.md-effect-9 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-70deg);
  -moz-transform: rotateX(-70deg);
  -ms-transform: rotateX(-70deg);
  transform: rotateX(-70deg);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}

.md-show.md-effect-9 .md-content {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1;
}


Вариант 10

Демо

Базовые стили плюс эти:

Код

/* Effect 10: 3D sign */
.md-effect-10.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px;
}

.md-effect-10 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-60deg);
  -moz-transform: rotateX(-60deg);
  -ms-transform: rotateX(-60deg);
  transform: rotateX(-60deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.md-show.md-effect-10 .md-content {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1;
}


Вариант 11

Демо

Базовые стили плюс эти:

Код

/* Effect 11: Super scaled */
.md-effect-11 .md-content {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.md-show.md-effect-11 .md-content {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}


Вариант 12

Демо

Базовые стили плюс эти:

Код

/* Effect 12: Just me */
.md-effect-12 .md-content {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.md-show.md-effect-12 ~ .md-overlay {
  background: #e74c3c;
  opacity:1;
}  

.md-effect-12 .md-content h3,
.md-effect-12 .md-content {
  background: transparent;
}

.md-show.md-effect-12 .md-content {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}


Вариант 13

Демо

Базовые стили плюс эти:

Код

/* Effect 13: 3D slit */
.md-effect-13.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px;
}

.md-effect-13 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-3000px) rotateY(90deg);
  -moz-transform: translateZ(-3000px) rotateY(90deg);
  -ms-transform: translateZ(-3000px) rotateY(90deg);
  transform: translateZ(-3000px) rotateY(90deg);
  opacity: 0;
}

.md-show.md-effect-13 .md-content {
  -webkit-animation: slit .7s forwards ease-out;
  -moz-animation: slit .7s forwards ease-out;
  animation: slit .7s forwards ease-out;
}

@-webkit-keyframes slit {
  50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
  100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@-moz-keyframes slit {
  50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
  100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@keyframes slit {
  50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
  100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}


Вариант 14

Демо

Базовые стили плюс эти:

Код

/* Effect 14: 3D Rotate from bottom */
.md-effect-14.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px;
}

.md-effect-14 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateY(100 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateX(90deg);
  -moz-transform: translateY(100 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateX(90deg);
  -ms-transform: translateY(100 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateX(90deg);
  transform: translateY(100 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateX(90deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  transform-origin: 0 100%;
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.md-show.md-effect-14 .md-content {
  -webkit-transform: translateY(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateX(0deg);
  -moz-transform: translateY(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateX(0deg);
  -ms-transform: translateY(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateX(0deg);
  transform: translateY(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateX(0deg);
  opacity: 1;
}


Вариант 15

Демо

Базовые стили плюс эти:

Код

/* Effect 15: 3D Rotate in from left */
.md-effect-15.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px;
}

.md-effect-15 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(100px) translateX(-30 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateY(90deg);
  -moz-transform: translateZ(100px) translateX(-30 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateY(90deg);
  -ms-transform: translateZ(100px) translateX(-30 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateY(90deg);
  transform: translateZ(100px) translateX(-30 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateY(90deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  transform-origin: 0 100%;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.md-show.md-effect-15 .md-content {
  -webkit-transform: translateZ(0px) translateX(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateY(0deg);
  -moz-transform: translateZ(0px) translateX(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateY(0deg);
  -ms-transform: translateZ(0px) translateX(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateY(0deg);
  transform: translateZ(0px) translateX(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> rotateY(0deg);
  opacity: 1;
}


Важно! Чтобы все эти варианты модальных окон у вас заработали, в самом конце кода страницы нужно подключить эти скрипты (есть в прикреплённом архиве):

Код

<script src="js/classie.js"></script>
<script src="js/modalEffects.js"></script>


Вариант 16 - модальное окно с разблёриванием заднего фона

Демо

В этом варианте при появлении модального окна, всё остальное содержимое веб-страницы разблёривается (размывается), тем самым достигается еще больший акцент на модальное окно и его содержимое.
Содержимое страницы сайта нужно заключить внутрь блока div с классом container, таким образом, всё, что попадёт внутрь этого блока, при появлении модального окна, будет заблёрено.

Применяем базовые CSS-стили плюс дополнительно эти:

Код

/* Effect 16: Blur */
.md-show.md-effect-16 ~ .md-overlay {
  background: rgba(180,46,32,0.5);
}

.md-show.md-effect-16 ~ .container {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  filter: blur(3px);
}

.md-effect-16 .md-content {
  -webkit-transform: translateY(-5 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -moz-transform: translateY(-5 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -ms-transform: translateY(-5 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  transform: translateY(-5 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  opacity: 0;
}

.md-show.md-effect-16 ~ .container,
.md-effect-16 .md-content {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.md-show.md-effect-16 .md-content {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}


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

Код

<!-- for the blur effect -->
<!-- by @derSchepp https://github.com/Schepp/CSS-Filters-Polyfill -->
<script>
// this is important for IEs
var polyfilter_scriptpath = '/js/';
</script>
<script src="/js/cssParser.js"></script>  
<script src="/js/css-filters-polyfill.js"></script>


Вариант 17 - модальное окно с 3-D эффектом на странице

Демо

Для работы этого варианта, первым делом, нужно перед базовыми CSS-стилями подключить стили для обеспечения 3-D эффекта:

Код

.md-perspective,
.md-perspective body {
  height: 100%;
  overflow: hidden;
}

.md-perspective body {
  background: #222;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px;
}


Ну и, помимо базовых стилей, дополнительно подключаем стили для эффекта появления модального окна:

Код

/* Effect 17: Slide in from bottom with perspective on container */
.md-show.md-effect-17 ~ .container {
  height: 100%;
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}  

.md-show.md-effect-17 ~ .container,
.md-show.md-effect-17 ~ .md-overlay {
  -webkit-transform: rotateX(-2deg);
  -moz-transform: rotateX(-2deg);
  -ms-transform: rotateX(-2deg);
  transform: rotateX(-2deg);
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.md-effect-17 .md-content {
  opacity: 0;
  -webkit-transform: translateY(200 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -moz-transform: translateY(200 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -ms-transform: translateY(200 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  transform: translateY(200 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
}

.md-show.md-effect-17 .md-content {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  -webkit-transition: all 0.3s 0.2s;
  -moz-transition: all 0.3s 0.2s;
  transition: all 0.3s 0.2s;
}


В конце кода страницы, как обычно, подключаем скрипты:

Код

<script src="js/classie.js"></script>
<script src="js/modalEffects.js"></script>


Вариант 18 - еще одно модальное окно с 3-D эффектом для содержимого страницы

Демо

Еще один очень интересный вариант для появления модального окна. Суть вот в чём: при активации модального окна, содержимое страницы, заключённое в блок div с классом container, как бы сжимается до размеров некой области в центре экрана, и при этом оказывается под полупрозрачным слоем произвольного цвета.Ну а поверх всего этого, естественно, выводится модальное окно.

Полные CSS-стили для этого примера:

Код

.md-perspective,
.md-perspective body {
  height: 100%;
  overflow: hidden;
}

.md-perspective body {
  background: #222222;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px;
}

.container {
  background: #2d3945;
  min-height: 100%;
}

.md-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 630px;
  min-width: 320px;
  height: auto;
  z-index: 2000;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateY(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -moz-transform: translateX(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateY(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -ms-transform: translateX(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateY(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  transform: translateX(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> translateY(-50 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
}

.md-show {
  visibility: visible;
}

.md-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  background:#2d3945;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.md-show ~ .md-overlay {
  opacity: 1;
  visibility: visible;
}

/* Content styles */
.md-content {
  color: #fff;
  background: #374655;
  position: relative;
  border-radius: 3px;
  margin: 0 auto;
}

.md-content h3 {
  margin: 0;
  padding: 0.4em;
  text-align: center;
  font-size: 2.4em;
  font-weight: 300;
  opacity: 0.8;
  background: rgba(0,0,0,0.1);
  border-radius: 3px 3px 0 0;
}

.md-content > div {
  padding: 15px 40px 30px;
  margin: 0;
  font-weight: 300;
  font-size: 1.15em;
}

.md-content > div p {
  margin: 0;
  padding: 10px 0;
}

.md-content > div ul {
  margin: 0;
  padding: 0 0 30px 20px;
}

.md-content > div ul li {
  padding: 5px 0;
}

.md-content button {
  display: block;
  margin: 0 auto;
  font-size: 0.8em;
}

/* Individual modal styles with animations/transitions */
/* Effect 18: Slide from right with perspective on container */
.md-show.md-effect-18 ~ .container {
  height: 100%;
  overflow: hidden;
}

.md-show.md-effect-18 ~ .md-overlay {
  background:rgba(255,255,255,0.8);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

.md-show.md-effect-18 ~ .container,
.md-show.md-effect-18 ~ .md-overlay {
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
  -webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
  -moz-transform-style: preserve-3d;
  -moz-transform-origin: 0% 50%;
  -moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  animation: rotateRightSideFirst 0.5s forwards ease-in;
}

@-webkit-keyframes rotateRightSideFirst {
  50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; }
  100% { -webkit-transform: translateZ(-200px); }
}

@-moz-keyframes rotateRightSideFirst {
  50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; }
  100% { -moz-transform: translateZ(-200px); }
}

@keyframes rotateRightSideFirst {
  50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; }
  100% { transform: translateZ(-200px); }
}

.md-effect-18 .md-content {
  -webkit-transform: translateX(200 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -moz-transform: translateX(200 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  -ms-transform: translateX(200 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  transform: translateX(200 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  opacity: 0;
}

.md-show.md-effect-18 .md-content {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  -webkit-transition: all 0.5s 0.1s;
  -moz-transition: all 0.5s 0.1s;
  transition: all 0.5s 0.1s;
}


HTML-конструкция этого варианта:

Код

<div class="md-modal md-effect-18" id="modal-18">
<div class="md-content">
<h3>Модальный диалог</h3>
<div>
<p>Это модальное окно. С ним вы можете сделать следующее:</p>
<ul>
<li><strong>Читать:</strong> Модальное окно, видимо, хочет сообщить вам что-то важное, поэтому ознакомьтесь с его содержимым!</li>
<li><strong>Смотреть:</strong> модальное окно привлекает ваше внимание, чтобы вы ощутили его присутствие.</li>
<li><strong>Закрыть:</strong> Нажмите кнопку внизу, чтобы закрыть модальное окно.</li>
</ul>
<button class="md-close">Закрой меня!</button>
</div>
</div>
</div>

<div class="container">ЗДЕСЬ СОДЕРЖИМОЕ СТРАНИЦЫ САЙТА</div>

<div class="md-overlay"></div>


И в самом низу кода страницы подключаем скрипты:

Код

<script src="js/classie.js"></script>
<script src="js/modalEffects.js"></script>

Просмотров: 352 | Скачиваний: 8 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

    Hover.css - набор CSS3 эффектов для элементов страницы сайта

    Hover.css представляет собой таблицу CSS-стилей, применимых к различным элементам на странице сайта (ссылкам, кнопкам, логотипам, SVG и просто изображениям), дающих в итоге различные визуальные эффекты, как то: трансформация, фоновые и граничные переходы, тени и свечение, пузыри и загнутые уголки и прочее. Вся прелесть в том, что вам достаточно подключить файл стилей hover.css на страницах своего сайта и прописать для нужных элементов страниц соответствующие эффектам классы и всё, можете любоваться!

    12 вариантов стильных всплывающих окон уведомлений

    Приготовил для вас сегодня очередную вкусняшку! Эта подборка рецептов всплывающих окошек может вам пригодиться, и не раз! Дайте только волю фантазии, ведь с их помощью можно реализовать столько полезного! Пока оформлял материал, на ум приходило и всплывающие контейнеры с ссылкой на скачивание, и окно онлайн-консультанта для продающего сайта, и окно о приходе нового сообщения и много,много,много еще чего!

    Набор эффектов на CSS для модальных окон - Часть 2

    Вторая, заключительная часть статьи о различных вариантах вывода модальных окон и эффектов для них. В двух частях обзора мы рассмотрели порядка двадцати различных вариантов для модальных окон, каждый из которых по-своему интересен. Уверен, вы найдёте им достойное применение на страницах своих сайтов!

    Красивая форма авторизации с анимацией иконок

    Симпатичная форма авторизации, отличное сочетание цветов, главной изюминкой формы являются выезжающие слева от полей ввода иконки, визуально дублирующие назначение данного поля. Например, для поля username выводится иконка человечка, для поля password иконка замка.

    Прогресс-бар с плавной загрузкой на CSS

    Симпатичный прогресс-бар, отражающий какую-то информацию, например результаты какого-либо опроса, в виде плавно загружающихся разноцветных индикаторов (полос). В данном примере не используется JavaScript, всё реализовано только на CSS.

Онлайн статистика

11.12.2017

Понедельник

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: