Как создать всплывающее окно
Обо всем 0 Комментариев ,

Как создать всплывающее окно (информационная полоса вверху экрана)?

Заметил, что многие сайты используют не обычный поп-ап в виде всплывающего окна, а поп-ап в виде строки, появляющейся вверху экрана. Данный вид всплывающего окна может быть очень эффективным. В этой статье приведу пример, как сделать поп-ап самому, используя только HTML и CSS без каких-либо картинок и Javascript.

Ниже представлен полностью готовый код для такого поп-апа

Код для файла  HTML

<div id=»alert»>

<a class=»alert» href=»#alert»>This is a slide down alert!</a>

</div>

Код для таблицы стилей CSS

#alert {

position: relative;

}

#alert:hover:after {

background: hsla(0,0%,0%,.8);

border-radius: 3px;

color: #f6f6f6;

content: ‘Click to dismiss’;

font: bold 12px/30px sans-serif;

height: 30px;

left: 50%;

margin-left: -60px;

position: absolute;

text-align: center;

top: 50px;

width: 120px;

}

#alert:hover:before {

border-bottom: 10px solid hsla(0,0%,0%,.8);

border-left: 10px solid transparent;

border-right: 10px solid transparent;

content: »;

height: 0;

left: 50%;

margin-left: -10px;

position: absolute;

top: 40px;

width: 0;

}

#alert:target {

display: none;

}

.alert {

animation: alert 1s ease forwards;

background-color: #c4453c;

background-image: linear-gradient(135deg, transparent,

transparent 25%, hsla(0,0%,0%,.1) 25%,

hsla(0,0%,0%,.1) 50%, transparent 50%,

transparent 75%, hsla(0,0%,0%,.1) 75%,

hsla(0,0%,0%,.1));

background-size: 20px 20px;

box-shadow: 0 5px 0 hsla(0,0%,0%,.1);

color: #f6f6f6;

display: block;

font: bold 16px/40px sans-serif;

height: 40px;

position: absolute;

text-align: center;

text-decoration: none;

top: -45px;

width: 100%;

}

@keyframes alert {

0% { opacity: 0; }

50% { opacity: 1; }

100% { top: 0; }

}

Это базовый рабочий вариант, от которого можно отталкиваться, создавая необходимые вам элементы.



Подпишитесь на обновления блога!

Будьте всегда в курсе новостей

Добавить комментарий