Новый лицо входа! Готовим обновление. GameCMS

Шаг 1. HTML​

Теперь нам необходимо создать оболочку, в которой в последовательности будут заключены элементы отображаемые в окне, кроме этого все это будет заключено в единый контейнер всплывающего окна.

<div class="row pop-up"><div class="box small-6 large-centered"><a href="#" class="close-button">&#10006;</a><h3>Добро пожаловать</h3><p>Краткое описание</p><p>Полный текст в окне.</p><a href="#" class="button">Продолжить</a></div></div>

Нажмите, чтобы раскрыть...

Шаг 2. CSS​

Нам необходимо определить параметры контейнера, кроме этого мы стилизуем наш контейнер заливкой цвета, и добавлением кнопок. Мы добавили для фона размытие, ведь нам необходимо отвлечь внимание и приковать его к окну:
.cover {height: 100%;width: 100%;position: absolute;z-index: 1;}.blur-in {-webkit-animation: blur 2s forwards;-moz-animation: blur 2s forwards;-o-animation: blur 2s forwards;animation: blur 2s forwards;}.blur-out {-webkit-animation: blur-out 2s forwards;-moz-animation: blur-out 2s forwards;-o-animation: blur-out 2s forwards;animation: blur-out 2s forwards;}@-webkit-keyframes blur {0% {-webkit-filter: blur(0px);-moz-filter: blur(0px);-o-filter: blur(0px);-ms-filter: blur(0px);filter: blur(0px);}100% {-webkit-filter: blur(4px);-moz-filter: blur(4px);-o-filter: blur(4px);-ms-filter: blur(4px);filter: blur(4px);}}@-moz-keyframes blur {0% {-webkit-filter: blur(0px);-moz-filter: blur(0px);-o-filter: blur(0px);-ms-filter: blur(0px);filter: blur(0px);}100% {-webkit-filter: blur(4px);-moz-filter: blur(4px);-o-filter: blur(4px);-ms-filter: blur(4px);filter: blur(4px);}}@-o-keyframes blur {0% {-webkit-filter: blur(0px);-moz-filter: blur(0px);-o-filter: blur(0px);-ms-filter: blur(0px);filter: blur(0px);}100% {-webkit-filter: blur(4px);-moz-filter: blur(4px);-o-filter: blur(4px);-ms-filter: blur(4px);filter: blur(4px);}}@keyframes blur {0% {-webkit-filter: blur(0px);-moz-filter: blur(0px);-o-filter: blur(0px);-ms-filter: blur(0px);filter: blur(0px);}100% {-webkit-filter: blur(4px);-moz-filter: blur(4px);-o-filter: blur(4px);-ms-filter: blur(4px);filter: blur(4px);}}@-webkit-keyframes blur-out {0% {-webkit-filter: blur(4px);-moz-filter: blur(4px);-o-filter: blur(4px);-ms-filter: blur(4px);filter: blur(4px);}100% {-webkit-filter: blur(0px);-moz-filter: blur(0px);-o-filter: blur(0px);-ms-filter: blur(0px);filter: blur(0px);}}@-moz-keyframes blur-out {0% {-webkit-filter: blur(4px);-moz-filter: blur(4px);-o-filter: blur(4px);-ms-filter: blur(4px);filter: blur(4px);}100% {-webkit-filter: blur(0px);-moz-filter: blur(0px);-o-filter: blur(0px);-ms-filter: blur(0px);filter: blur(0px);}}@-o-keyframes blur-out {0% {-webkit-filter: blur(4px);-moz-filter: blur(4px);-o-filter: blur(4px);-ms-filter: blur(4px);filter: blur(4px);}100% {-webkit-filter: blur(0px);-moz-filter: blur(0px);-o-filter: blur(0px);-ms-filter: blur(0px);filter: blur(0px);}}@keyframes blur-out {0% {-webkit-filter: blur(4px);-moz-filter: blur(4px);-o-filter: blur(4px);-ms-filter: blur(4px);filter: blur(4px);}100% {-webkit-filter: blur(0px);-moz-filter: blur(0px);-o-filter: blur(0px);-ms-filter: blur(0px);filter: blur(0px);}}.content {width: 650px;margin: 0 auto;padding-top: 100px;}span {color: dimgray;}.pop-up {position: fixed;margin: 5% auto;left: 0;right: 0;z-index: 2;}.box {background-color: whitesmoke;text-align: center;margin-left: auto;margin-right: auto;margin-top: 10%;position: relative;-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);}.button {margin 0 auto;background-color: #FF8566;margin-bottom: 33px;}.button:hover {background-color: #7CCF29;-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);}

Нажмите, чтобы раскрыть...

Шаг 3. JS​

Последним шагом будет включение и отключение размытия, эту функцию мы реализуем с помощью простой функции js:
$(function() {$('.pop-up').hide();$('.pop-up').fadeIn(1000);$('.close-button').click(function (e) {$('.pop-up').fadeOut(700);$('#overlay').removeClass('blur-in');$('#overlay').addClass('blur-out');e.stopPropagation();});});

Нажмите, чтобы раскрыть...

nk. сказал(а):

Посмотреть вложение 3046
Добавьте Сплывающее окно для инфо и рекламы без Регистрации полезная Штука)

Исходник - Скачать

Также мы добавили несколько кнопок, которые будут оживать при наведении курсора мыши, это позволит добавить большего реализма и оживить наше окно.

Нажмите, чтобы раскрыть...

DetectorDevil сказал(а):

Посмотреть вложение 3047

Нажмите, чтобы раскрыть...

nk. сказал(а):

если возможно иконку джостика сменить на анимацию значка кс ну или что нибудь простенькое вообще круто будет)

Нажмите, чтобы раскрыть...

DetectorDevil сказал(а):

Эту систему можете уже сами изменить так как gamecms используют не только для cs1.6\csgo\cs-2\

Нажмите, чтобы раскрыть...

nk. сказал(а):

Здорово !
он адаптивный версии другие поддерживает не смотрели?

Нажмите, чтобы раскрыть...