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

Спойлер с красивой кнопкой на HTML + CSS

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

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

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

1. При открытии страницы или сайта:

Спойлеры для сайта с плавным открытием и закрытием

Спойлеры для сайта с плавным открытием и закрытием

2. Это идет при клике по кнопке:

Плавный спойлер на HTML и CSS без JS

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

HTML

Код

<input type="checkbox" id="bedamukopeg"/><label for="bedamukopeg">ON</label><div>Здесь скрываем по умолчанию текст</div>

CSS

Код

#bedamukopeg {display: none;}
[for="bedamukopeg"] {
  position: relative;
  display: block;
  width: 90px;
  height: 10px;
  padding: 15px;
  border-radius: 50px;
  line-height: 10px;
  color: #89d7ea;
  text-shadow: 1px 1px 0px rgba(212, 200, 200, 0.28);
  background: rgb(68, 65, 65);
  box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 5px rgb(56, 51, 51), inset 0 6px 6px rgba(109, 103, 103, 0.5), inset 0 -6px 1px rgba(216, 211, 211, 0.2);
  cursor: pointer;
}

[for="bedamukopeg"]:before {
  content: "OFF";
  position: absolute;
  right: 15px;
  color: #141514;
}
[for="bedamukopeg"]:after {
  content: "";
  position: absolute;
  left: 5px; top: 5px;
  display: block;
  width: 50px;
  height: 30px;
  border-radius: 50px;
  background: #b1a9a9 linear-gradient(#b9bbb5 0%, #fbfbfb 40%, #858884 100%);
  transition: .5s;
}
#bedamukopeg:checked ~ [for="bedamukopeg"]:after {
  left: 65px;
}
#bedamukopeg:not(:checked) + label + * { display: none;
}

При открытии вы уведите в самом каркасе светло-синем оттенке ON, стоит только сделать клик, как кнопка плавно переедет по правую сторону и откроется тема, что изначально скрыта была, но уже будет наблюдать OFF в темном оттенке.

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

Спойлер с плавным открытием и закрытием

Второй вариант:

1.1. При открытие портала:

Обновленный скрипт спойлера

1.2. И при открытие информаций:

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

HTML

Код

<input type="checkbox" id="kenecustomizab" />
  <label for="kenecustomizab">Spoiler</label>
<div class="kenecustomizab">
Ускоренная проверка информации на данный момент.
  <br/><br/>
  <img style="display:block;margin: 0 auto;" src="Ссылка на изображение"/>
</div>

CSS

Код

input[id^="kenecustomizab"]{
  display: none;
}
input[id^="kenecustomizab"] + label {
  display: block;
  width: 215px;
  margin: 0 auto;
  padding: 6px 18px;
  background: #b71184;
  color: #f3efef;
  text-align: center;
  font-size: 23px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .6s;
}
input[id^="kenecustomizab"]:checked + label {
  color: #333;
  background: #ccc;
}
input[id^="kenecustomizab"] ~ .kenecustomizab {
  width: 87%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 5px auto 0;
  padding: 10px;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  transition: all .6s;
}
input[id^="kenecustomizab"]:checked + label + .kenecustomizab{
  height: auto;
  opacity: 1;
  padding: 8px;
}

Вашему вниманию простой стиль дизайна в одной палитре цвета, где можно добавить градиент и сделать обвод, вообщем, чтоб соответствовал основному стилю.

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

Если вы хотите скрыть что-то вроде окончания большой статьи или фильма или ответы на загадки. То здесь как раз можно задействовать малоизвестный трюк HTML, называемый спойлером.

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

20 Мая 2019 Просмотров: 4904 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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