спойлер на чистом CSS для Блоггер

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

Это просто фото и здесь спойлер не откроется

Применение скрытого текста очень популярно и  ни как не влияет на поисковую оптимизацию. Спрятать можно всё что угодно. Картинки, коды, тексты, счётчики. Применение огромное. Прячьте свои рецептики, секретные формулы, ответы на загадки - всё что душа пожелает.

В статье красивая выпадающая панель я предлагала вариант спойлера, который работает на JavaScript. Сегодня для вас спойлер, где только чистая стилистика CSS3. Посмотрите на тестовом блоге его в работе

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

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

В данном примере под вопросом спрятана картинка, в качестве ответа на загадку. В случае с текстом в коде замените адрес картинки на нужную информацию. Как - то так

<div class="canustrating">
<input class="mesnongengas" id="punch" type="checkbox" />
  <label for="punch">Нажми для показа</label>
  <br />
<div>
Тут всё самое интересное, важное, нужное
  </div>
</div>

Для реализации нужно скопировать код, написать ваш текст и установить его целиком прямо в редакторе в режиме HTML в нужном месте.
Со стилями самой кнопки тоже можно поиграться. Хотя бы даже с цветом, меняя свойства background:. Таблица есть здесь.

Начинающим блогерам не всегда бывает понятно сразу, а попробовать хочется. Пишите в комментариях - во всём разберёмся.

Всем спасибо и до встречи. 

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

Введите Ваш email