Главная » Каталог » Диалоги,overlay и lightbox » Набор эффектов на CSS для модальных окон - Часть 2

Диалоги,overlay и lightbox

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



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

Вариант 19

Ну, и еще один интересный эффект появления модального окна: страница сайта как будто бы отклоняется назад и сверху выпадает модальное окно. После этого основной контент страницы приглушается цветовым слоем, а всё внимание обращается на модальное окно по центру страницы.

Демо

Полный 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: 1;
  background:#2d3945;
  -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: #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 19: Slip in from the top with perspective on container */
.md-show.md-effect-19 ~ .container {
  height: 100%;
  overflow: hidden;
}

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

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

@-webkit-keyframes OpenTop {
  50% {  
  -webkit-transform: rotateX(10deg);  
  -webkit-animation-timing-function: ease-out;  
  }
}

@-moz-keyframes OpenTop {
  50% {  
  -moz-transform: rotateX(10deg);  
  -moz-animation-timing-function: ease-out;  
  }
}

@keyframes OpenTop {
  50% {  
  transform: rotateX(10deg);  
  animation-timing-function: ease-out;  
  }
}

.md-effect-19 .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" /> ;
  opacity: 0;
}

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

@media screen and (max-width: 32em) {
body { font-size: 75%; }
}


HTML-конструкция данного примера аналогична предыдущей:

Код

<div class="md-modal md-effect-19" id="modal-19">  
<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">
ЗДЕСЬ СОДЕРЖИМОЕ СТРАНИЦЫ САЙТА
<button class="md-trigger md-setperspective" data-modal="modal-19">Жми давай!</button>
</div>  

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


и в конце кода страницы те же скрипты:

Код

<script src="js/classie.js"></script>  
<script src="js/modalEffects.js"></script>  
Обсуждение материала:
Комментариев: 0
avatar

Другие материалы:

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

    12.11.2016

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

    Комментарии: 0   Просмотры: 260

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

    26.10.2016

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

    Комментарии: 0   Просмотры: 370

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

    17.10.2016

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

    Комментарии: 0   Просмотры: 327

Теги материала

Хостинг от uCoz