">

События в этот день
(даты, события, история)

Узнай про космос
(ввселенная, планеты, фазы луны)

Новые статьи:

"Деньги не пахнут" смысл цитаты и её история


Ресторан, построенный в туалете. Уникальные места СПб.


Какими были трамваи в Выборге? Выборг трамваи.


Самая старая канализация в мире - Римский водопровод. (Загуан. Римский Храм воды


Черный юмор. Ирония современного мира в картинках.


Что такое "совок"?


Откуда берется усталость и депрессия после работы или учебы?


Подборка притч о страхах и спокойствии


Египет и Сирия в 19, 20 веке. Фотографии Как выглядели.


Шокирующий факт о сфинксах в Петербурге


Не сохраняются абзацы и новые строки PHP MySQL



“ Собственность рождалась в муках, как и все, что рождается на земле. Главная трудность состояла в том, чтобы отделить свое от чужого. У чужого много преимуществ, о нем ре нужно сушить голову, сторожить его день и ночь. А чужие болезни? Чужие неприятности? Нужно ли доказывать, что они намного лучше, чем свои?”

дед Мазай

Следующая цитата »

Это факт!


МоулПугать ребенка является нарушением закона.

Следующий факт »

Ра оставил тебе послание!... (0о0)

Кнопка "открыть текст", которая скрывает часть текста, а после нажатия открывает.


html, css, js, спойлер, читать далее, ещё, открыть, раскрыть, текст,

Представьте ситуацию. У вас есть большой текст и вы хотите, чтобы посетитель вашего сайта видел лишь верхнюю часть текста, а нижняя часть текста была скрыта и открывалась только после нажатия на кнопку "читать далее". Есть много способов решения этой проблемы, но я предлагаю вам способ, который построен на чистом css коде.

See the Pen OJyRjBp by Lora Ug (@lora-ug) on CodePen.


Для всего нам понадобиться блок tetopis, где будет наполовину скрытый текст и кнопк buttonopis, которая будет открывать весь текст полностью.

<div class="block">
<input class="buttonopis" type="button"value="Читать биографию"/>
<div class="textopis" tabindex="0">
много много много много текстай... сколько же его тут? ооооооооой.... сколько же тут ё мое текста-тооооо ооооооой... кругом текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
</div>


В css нужно создать создать саму кнопку и textopis.
width и height в textopis будет регулировать размер ВИДИМОГО текста, который увидит посетитель изначально, не открывая текст полностью.

.buttonopis {background: rgba(255,255,255, 0.4); outline: none;}
.textopis {
display: block;
width: 300px;
height: 30px;
margin-top: 5px;
outline: none;
overflow: hidden;
}
.textopis:focus, .buttonopis:focus ~ .textopis {height: auto; background:rgba(255,255,255, 0.7); padding:15px; border:1px solid white; border-radius:10px; color:black;}


Разумеется, кнопку buttonopis можно разместить и под блоком. для этого понадобиться лишь манипуляция с свойством z-index и отступами сверху и снизу.








ОТКРЫТЬ КОММЕНТАРИИ Закрыть комментарии




Введите ЛЮБОЕ число ЦИФРОЙ от НУЛЯ до ДЕСЯТИ (проверка на бота)



P.S. сайт и некоторые статьи и сказки (с ошибками, неполные) корректируются, дорабатываются и удаляются.
Желательно, чтобы вы добавили в комментарий, то что бы вы хотели бы исправить, удалить или наоборот добавить на портал (сайт) , такие комментарии читаются и обязательно учитываются добрым админом :). (например: "добавьте раздел поэзии", "исправьте ошибку на странице: (recsgames.ru/example44)", "добавьте функцию такую-то" и прочее).
С уважением, создатель портала. :)





Почитать интересные истории:




Сырно написано? Заложи страницу в закладки :)








×

Рассказы из категории: Создание сайта (html,css,php,js)



info:

Bonjour Mon'Amie! Спасибо за прочтение!
Всем веселья и добра! :)