ZorNet.Ru — сайт для вебмастера » HTML и CSS » Стильное модальное окно с градиентом CSS

Стильное модальное окно с градиентом CSS

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

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

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

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

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

Модальное окно на разные тематические сайты

Модальное окно на разные тематические сайты

Если нужно вызвать, что на кнопки пишем ключевое обозначение, то делаем клик для вызова:

Красивая кнопка для открытие окна на CSS

Установочный процесс:

HTML

Код

<a href="#okno-po-tsentru" class="adaptivn-pozitsion-dirovalos-1" id="vusplavan-uskaceda">Открыть окно</a>

<div class="kecanp-misicineg" id="okno-po-tsentru">
  <div class="pozitsion-dirovalos">

  <div class="minusobcan">
  <h1 class="kilopaden">ZorNet.Ru</h1>
  <p class="description">Интересные решения для вебмастера в создание и продвижение сайтов.</p>
  </div>
<p class="lendus">Вместо этого вы вручную настраиваете положение кресла, а стальная арматура переносит мониторы и периферийный лоток для поездки, чтобы они оставались в удобном положении.</p>
<button class="adaptivnoye">Переход →</button>
<a href="#vusplavan-uskaceda" class="adaptivn-pozitsion-dirovalos-2"></a>
</div>
</div>

CSS

Код

.kecanp-misicineg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.kecanp-misicineg:target {
  display: flex;
}
.pozitsion-dirovalos {
  width: 58rem;
  padding: 2rem 1rem;
  border-radius: .8rem;
  color: hsl(0, 0%, 100%);
  background: linear-gradient(to right bottom, #176594, #e618d6);
  box-shadow: 0.4rem 0.4rem 2.4rem 0.2rem hsla(236, 55%, 40%, 0.3);
  position: relative;
  overflow: hidden;
}
.minusobcan {
  text-align: center;
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid hsla(0, 0%, 100%, .4);
}
.kilopaden {
  font-size: 3.2rem;
}
.description {
  margin-top: 2rem;
  font-size: 1.6rem;
  font-style: italic;
}
.lendus {
  padding: 0 4rem;
  margin-bottom: 4rem;
  font-size: 1.6rem;
  line-height: 2;
}
.lendus::before {
  content: '';
  position: absolute;
  top: 0%;
  left: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 18rem;
  height: 18rem;
  border: 1px solid hsla(0, 0%, 100%, .2);
  border-radius: 100rem;
  pointer-events: none;
}
.adaptivnoye {
  padding: 1rem 1.6rem;
  border: 1px solid hsla(0, 0%, 100%, .4);
  border-radius: 100rem;
  color: inherit;
  background: transparent;
  font-size: 1.4rem;
  font-family: inherit;
  letter-spacing: .2rem;
  transition: .2s;
  cursor: pointer;
}
.adaptivnoye:hover,
.adaptivnoye:focus {
  border-color: hsla(0, 0%, 100%, .6);
  -webkit-transform: translateY(-.2rem);
  transform: translateY(-.2rem);
}
.adaptivn-pozitsion-dirovalos-1 {
  font-size: 1.7rem;
  color: hsl(0, 0%, 100%);
  background: linear-gradient(to right bottom, #1695e2, #b91a32);
  box-shadow: 0.4rem 0.4rem 2.4rem 0.2rem hsla(236, 50%, 50%, 0.3);
  border-radius: 100rem;
  padding: 1.5rem 3.9rem;
  transition: .2s;
}
.adaptivn-pozitsion-dirovalos-1:hover,
.adaptivn-pozitsion-dirovalos-1:focus {
  -webkit-transform: translateY(-.2rem);
  transform: translateY(-.2rem);
  box-shadow: 0 0 4.4rem .2rem hsla(236, 50%, 50%, 0.4);
}
.adaptivn-pozitsion-dirovalos-2 {
  width: 4rem;
  height: 4rem;
  border: 1px solid hsla(0, 0%, 100%, .4);
  border-radius: 100rem;
  color: inherit;
  font-size: 2.2rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;

  transition: .2s;
}
.adaptivn-pozitsion-dirovalos-2::before {
  content: '×';
  -webkit-transform: translateY(-.1rem);
  transform: translateY(-.1rem);
}
.adaptivn-pozitsion-dirovalos-2:hover,
.adaptivn-pozitsion-dirovalos-2:focus {
  border-color: hsla(0, 0%, 100%, .6);
  -webkit-transform: translateY(-.2rem);
  transform: translateY(-.2rem);
}

Для создания вам необходимы 2 файла, один для HTML и один для CSS, где следуйте инструкциям по созданию этого без каких-либо ошибок. Чтоб открывалось на всех страницах, то саму основу окна ставим вверх или вниз сайта, так как этот элемент присутствует на всех страницах.

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

Демонстрация

09 Сентября 2019 Загрузок: 2 Просмотров: 1082 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0