Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

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

Спойлер  за 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:.
Таблицата на цветовете е на ваше разположение, а за редактора на кодовете вече знаете. Там ще проверите резултата от вашия експеримент.
За начинаещите блогъри може би няма да стане всичко ясно веднага, но вероятно ще искат да опитат.
За въпроси моля, в коментарите. Или на тази страница.

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

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

Няма коментари:

Публикуване на коментар