спойлер с кнопкой CSS

спойлер
Привет, друзья. Буквально перед самыми праздниками публиковала пост, как сделать простой спойлер. Добавлю сегодня ещё один вариант скрытого текста. Сам же спойлер в этом исполнении будет открываться при нажатии на кнопку, дизайн которой, вы с лёгкостью сможете подогнать на свой вкус. Код без всяких библиотек, на чистом CSS. Поэтому достаточно лёгкий. Вот и пример сразу.


информация:
А вот и сам фокус

Здесь весь большой и очень секретный текст, который откроется при нажатии на кнопку. Или красивая картинка, код, форма связи - да и мало ли что ещё можно спрятать.

Готовый код устанавливайте в режиме HTML в нужном месте сообщения.

<style>.spoiler .spoiler_title {
  display: inline;
  float: left;
  margin: 3px 10px 0 0;
  padding: 4px 0;
  font-size: 16px;
  line-height: 1;
}
.spoiler label {
  cursor: pointer;
  background: #4682B4;
  margin: 0;
  padding: 4px 18px 4px 22px;
  outline: none;
  border-radius: 3px;
  color: #efefef;
  transition: all .3s ease-in-out;
  display: inline;
  font-size: 12px;
  font-family: arial, san-serif;
  line-height: 1;
  position: relative;
}
.spoiler input[type=checkbox] ~ label:before {
  content: "";
  height: 0;
  width: 0;
  border-width: 4px 4px 4px 7px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 7px;
  left: 8px;
}
.spoiler input[type=checkbox]:checked ~ label:before {
  content: "";
  height: 0;
  width: 0;
  border-width: 7px 4px 4px 4px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 8px;
  left: 8px;
}
.spoiler input {
  position: absolute;
  left: -999em;
  opacity: 0;
}
.spoiler .content_box {
  width: 100%;
  border: 1px solid #ddd;
  background: #efefef;
  height: auto;
  padding: 6px 10px;
  margin: 8px 0 0;
  overflow: hidden;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.spoiler .content_box .content {
  display: none;
}
.spoiler .content p {
  padding: 0;
  margin: 0
}
.spoiler .content p img {
  margin: 4px 0 0;
  max-width: 100%;
  height: auto;
}
.spoiler input[type=checkbox]:checked ~ .content_box .content {
  display: block;
  -webkit-animation: slide-down .3s ease-out;
  -moz-animation: slide-down .3s ease-out;
}
@-webkit-keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}
@-moz-keyframes slide-down {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%)
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0)
  }
}</style>

<br />
<div class="spoiler">
<span class="spoiler_title"> информация: </span>
  <input id="item-1" type="checkbox" />
  <label for="item-1">здесь</label><br />
<div class="content_box">
<div class="content">
А вот и сам фокус<br />
<br />
Здесь всё что  откроется при нажатии на кнопку</div>
</div>
</div>

Всё, что я отметила всяким разноцветием меняйте под ваш дизайн. Соответственно, и надписи, и то что скрыли от глаз.

Хороших всем выходных и с Наступившим 2018 годом.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email



0 коммент.:

Отправить комментарий

Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск
Foto
My Photo