×

Вокруг мира КрымПоследние новоститунистурцияВыборгфакты и мирПетербург и окрестностиОбщество, мирСтрашное и мистическоепро сссрТайны истории
Интересно уроки по html,css,js,phpМистика и ГаданияАнекдотыМузыка
Исскуство и поэзия ПритчиЯпонские стихи и прозаСтихи Серебренного векаМифы и Легенды древнего мираСтихи Золотого векаБасни
Разные эпохи Тайны историиСказки народов мираСредневековьеДревняя Азияпро ссср
Разное РаскраскиКонвертерыОригамиСтрашное и мистическоеКомедия "Дино и его друзья"
общество и мир Афоризмы и цитатыПсихологияфакты и мирПоследние новостиОбщество, мир

-----------

Вашему сайту нужна помощь? Политика конфидициальности Разместить рекламу

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


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 и отступами сверху и снизу.







Комментарии

Комментариев пока нет. Оставь тут свой комментарий или анекдот!


Комментарии к посту






Американские интересы чаще всего нарушаются там, где о них еще ничего не слышали.

Михаил Мамчич


Norway
Некоторые лягушки, живущие в Новой Гвинее, не были бы ядовитыми, если бы - не ели жуков. Есть жуки, которые носят в себе довольно много яда батрахотоксина (batrachоtоxins — BTXs). Эти жуки делают ядовитыми не только лягушек, но и местных птиц.

[ Интересные факты о мире ]






Как вставить данные в базу данных (таблицу)?
как сделать картинку рядом текстом, в одном блоке. html, css
Последние новости факты и мир Страшное и мистическое Крым турция тунис Выборг Общество, мир про ссср Петербург и окрестности Тайны истории






×

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