ZorNet.Ru — сайт для вебмастера » HTML и CSS » Выпадающее окно для сайта с помощью CSS

Выпадающее окно для сайта с помощью CSS

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

Это что-то в виде спойлера, только с большой кнопкой, так как изначально мы под нее выставили изображение. Что при заходе на страницу или сайт, пользователи и гости видят кнопку в синем или другом оттенке. Где на ней можно написать, что скрывается, как пример "Нажмите на меня" и сразу появится информация, которое ниже выезжает.

Сам факт переключение событий окна идет на элементе HTML, который будет изначально появляться в разных оттенках, как «on» и «off». Что для обывателя понятно, что красный идет на открытие, а зеленый, или тот который по умолчанию на кнопке цвет поставите, будет изначально виден всем. Для этого можно ее красиво оформить, это делается, чтоб как можно больше народу обратили внимание.

Рассмотрим как визуально выглядит:

Такой стиль дизайна представлен в материале.

1. Это вы установили, где уже форма содержат информацию.

2. После нажатие, здесь нет эффекта наведение, обязательно нажимаем, и как видим появилось изображение.

Приступаем к установке:

HTML

Код

<div class="canustrating">
<input type="checkbox" id="punch" class="mesnongengas">
  <label for="punch">Нажми для показа</label>
  <div>
  <img src="Ссылка на изображение" style="max-width:100%;height:auto" alt="Ключевое слово">
  </div>
</div>

CSS

Код

div.canustrating {
  color: #f7f4f4;
  text-shadow: 0 1px 0 #444040;
  width: 495px;
  padding: 1px;
  border-radius: 3px;
  margin: 1rem;
  text-align: center;
  font-family: Arial Black, sans-serif;
  margin: 0 auto;
}

div.canustrating label {
  display: block;
  background: #373c54;
  font-size: larger;
  border-radius: 5px;
  padding: 15px;
  transition: .4s all linear;
  border: 2px solid #f5f3f3;
  box-shadow: 1px 1px 5px rgba(72, 69, 69, 0.7), 1px 0px 10px 3px rgba(33, 31, 31, 0.44);
}

div.canustrating label:hover {
  cursor: pointer; background: #380f0f;
}
input.mesnongengas ~ div {
  height: 0px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.mesnongengas:checked ~ div { height: 215px;
}
input.mesnongengas:checked + label { background: #980c0c;
}

input.mesnongengas {
  display: none;
}

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

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

02 Декабря 2018 Просмотров: 1426 Комментариев: (0)

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

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

Kosten

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