Спойлер на чист CSS за Blogger

Здравейте, приятели. Спойлерът на страниците на блога е не само елемент от дизайна на страницата, но и напълно необходимо нещо, когато се публикува дълъг текст или да създадете за посетителя някаква интрига. Нека просто кажем, че спойлерът е част от информацията, която е скрита от посетителя, докато не кликне върху бутона или връзката, за да види цялото нейно съдържание.

Използването на скрит текст е много популярно и не влияе на оптимизацията на блога от търсачките. Може да се скрие всичко. Изображения, кодове, текстове, броячи. Приложението е огромно. Скрийте каквото душата ви желае.
В публикацията Красив панел със скрит текст предложих версия на спойлер, която работи на JavaScript. Днес за вас имам спойлер, само на чист CSS. Погледнете в тестовия блог , за да се запознаете с работата му.

Код

<div class="canustrating">

<input class="mesnongengas" id="punch" type="checkbox" />

<label for="punch">Кликни, за да разбереш</label>

<br />

<div>

<img alt="Отговор" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCS8wXTQ_BoKTk3XzX4xJoJV5ShNocjENqfSb7cnL9AYQixO1B6m-2Ynyze9DuZlFq5fYXl6gFO-hILSk1KwZC0jm90rE413F7pt0sYS5IsdcElDjIFTxcYHrTe6IoKJ2hKriUiQ4aOdE/w140-h69-p/girls_PNG6462322323.png" style="height: auto; max-width: 100%;" />

Тук е всичко, което е важно, интересно и нужно да се прочете

</div>

</div>

<style>

div.canustrating {

color: #050505;

text-shadow: 0 1px 0 #F2FEBF;

width: 495px;

padding: 1px;

border-radius: 3px;

margin: 1rem;

text-align: center;

font-family: Tahoma , sans-serif;

margin: 0 auto;

}

div.canustrating label {

display: block;

background: #F2FEBF;

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: #27B20B;

}

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: #F2FEBF;

}

input.mesnongengas {

display: none;

}</style>

В този пример е скрито изображение и много важен и нужен текст. Можете да скриете само изображение, само текст или и двете заедно.
За реализацията на спойлера, трябва да копирате кода, да напишете текста и да го инсталирате изцяло директно в редактора на публикацията в HTML режим на правилното място. Със стиловете на самия бутон можете да експериментирате. Или само с цвета, променящ свойството background:.
Таблицата на цветовете е на ваше разположение, а за редактора на кодовете вече знаете. Там ще проверите резултата от вашия експеримент.
За начинаещите блогъри може би няма да стане всичко ясно веднага, но вероятно ще искат да опитат.
За въпроси моля, в коментарите. Или на тази страница.

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:

Здраве за всички вас! Не забравяйте да правите добро на други хора!