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

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

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

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

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

Вариант 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>  

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

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

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

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

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

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

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

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

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

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

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

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

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

11.12.2017

Понедельник

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

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