Как сделать выезжающий текст на сайте

Раскрывающиеся блоки с скрытым содержанием с помощью CSS3

В процессе создания сайта или блога и дальнейшего его наполнения содержанием, по разным причинам, порой возникает необходимость скрыть какую-то часть текста, разместить более объёмную информацию в спрятанный до поры до времени блок, но при этом всё же указать пользователю на то, что имеется ещё кое что, и предоставить ему возможность просмотреть скрытое содержание без перехода на следующую строку или страницу.
Раньше для реализации такого решения использовалась груда javascript, теперь же всё это можно очень легко исполнить с помощью удивительных свойств CSS3.

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

Давайте, постараемся обойтись без лишней воды, посмотрите весь этот простейший механизм в действии, на наглядном примере, так же можете и подредактировать что-нибудь при желании:

Пример №1

В роли переключателей раскрывающихся блоков с дополнительной информацией используется никак не выделенный и не обозначенный текст, с недвусмысленным предложением нажать на него, что вы без страха и сомнений обязательно сделайте, чтобы увидеть скрытый текст)))

Надеюсь, из моего сумбурного пояснения, все же стало понятно в чём вся фишка. CSS применяет новые стили (с помощью псевдокласса checked), чтобы показать блок контента, который до этого был скрыт, только тогда, когда пользователь нажимает на элемент, который связан с флажком(checkbox) по уникальному идентификатору.

Из всего этого следует важное замечание:

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

Так, на словах мы разобрали, что куда и зачем, теперь, давайте посмотрим на html-каркас всей коннструкции:

Нажмите здесь, чтобы открыть!

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

1. CSS

Это всё, для аскетичного примера, вполне достаточный минимум. Но ведь, мы будем совсем не мы, если не навесим хоть каких-нибудь плюшек, да и пользователю лучше подсказать визуально, куда следует нажимать.
Во втором примере добавил простенький символ в виде плюса, который явно указывает на то, что здесь скрывается ещё что-то, при нажатии он моментально превращается в минус, а скрытым блокам с содержанием, прикрутил чуточку анимации при появлении, и всё это исключительно с помощью магии CSS3.

2. CSS

По всем раскладам, способ несомненно хорош, но как всегда, даже не удивительно нисколько, проблемы возникают с вечным тормозом прогресса, браузером IE, псевдо-класс checked поддерживают только 9-я и более современные версии этого браузера. Для старых версий IE-шки, остаётся всё по-старому, вам придётся использовать javascript.

Используя скрытые чекбоксы, вы можете легко реализовать вкладки-табы, модальное окно, блоки в стиле аккордеон, слайдеры, галереи и многое другое.

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 93

Проверял на Хроме и IE11, картина одна — все функционирует, но вот досаждает сам чекбокс, который все время на виду (в примере его нет), пытаюсь сообразить какая часть кода за него отвечает…

.hide <
display: none;
>
.hide <
display: none;
>

Должно быть именно display: none; и никак иначе, что касаемо данного примера.

Здравствуйте!
Есть небольшая проблема, хотелось бы чтоб после открытия первого пункта, при открытии второго, первый — автоматически скрывался. Подскажите, пожалуйста, если это возможно, то какую правку и куда нужно внести.

Здравствуйте, Алёша!
Если не особо вдаваясь в подробности, примерно так: Тынц >>
Набросал на скорую руку, посмотрите и поэкспериментируйте с параметрами,

В хроме не работает… у авторов кстати тоже…

Видимо неправильный у вас хром, всё прекрасно работает и у меня и авторов кстати тоже, пожалуйста не вводите людей в заблуждение, а для начала разберитесь с софтинами, которые пользуете. Повторяю, данный метод обрабатывают все современные и даже не очень современные браузеры… Chrome (его движок) вообще впереди планеты всей в плане поддержки новых стандартов и экспериментальных функций, более того именно под него они и пишутся изначально, а уж потом подхватываются другими движками к исполнению.

Читайте также:  Как сделать в домашних условиях соус майонезный

Здравствуйте!
Спасибо за интерес к теме. Нужно всё же признать, что метод пока ещё довольно сыроват для широкого использования, а с извечной браузерной нестыковкой обработки тех или иных стандартов и вовсе беда. Кроссбраузерного решения у меня на данный момент нет, этот способ скорее эксперимент, некий задел на будущее. Так что наверное пока не стоит воспринимать его как руководство к действию.

Спасибо за ответ!
После обновления в Android некоторых браузеров, этот метод заработал там, но штатный браузер пока не хочет.

Подскажите, возможно ли анимацию прикрутить?

Возможно. Примерно так: Тынц

Добрый день!
Очень прекрасный способ реализовать раскрывающиеся блоки. Спасибо автору.
Но вот незадача, ни в одном браузере в девайсах apple не происходит раскрытия текста, т.е. плюс на минус меняется, но текст не отображается.
Подскажите плз есть ли решение?
Вопрос срочный, заранее благодарю за оперативное решение!

Способ прекрасен, на IE и семействе firefox работает, но вот наткнулся на косяк там где не ждал: в safari. Просто не разворачивается, при этом сам сафарик контент видит. Не могли бы подсказать что можно сделать?

Здравствуйте, Константин.
У меня закралась небольшая ошибка, исправил, сейчас «сафарик» открывает блоки нормально. Пропустил связку между селекторами label

подскажите пожалуйста как можно сделать так, чтобы текст внутри label менялся вместе с «+» и «-»

Можно попробовать как-то вот так:
codepen.io/NeedHate/pen/EaMevE

Приветствую! Из массы информации касательно раскрывающихся блоков здесь я все же нашла то, что работает =) НО! Первые и второй пример не сработали (смотрела на Хроме).
Использовала посему этот код: jsfiddle.net/driver/a2qtjd4r/
Однако все же…
Плюсик на минус не меняется( и при повторном клике на заголовок блока текст внутри блока не скрывается. А хотелось бы. Очень нужно, чтобы при повторном клике текст скрывался, и чтобы была возможность оставить оба (ну или больше) блока раскрытыми одновременно.
Прошу помощи)

Здравствуйте.
Удивительно, по какой причине у вас именно в Chrome не работает данное решение. Сижу, таращусь в Chrome, клацаю по переключателям, всё прекрасно работает. Тоже самое и с вариантом из комментов.
Ну да ладно, что касаемо вашего вопроса, присмотритесь к решению предложенному выше NeedHate, по моему удачное исполнение, можете только исключить смену текста внутри label при клике, если вам это не нужно.
PS: А для того чтобы при повторном клике блок с текстом скрывался, достаточно в input, атрибут type=»radio» заменить на type=»checkbox»

Здравствуйте, а есть решение когда скрытый блок появляется ниже всех пунктов меню, а не под каждым?
У меня на главной должно быть 16 разделов в 3 столбца. При нажатии на раздел должен появляться список подразделов под всеми тремя столбцами.
Спасибо.

как сделать так чтобы плюсик находился в одной строке с самим текстом?

Это единственное решение? margin не помогает, в независимости от длины текста и значений margin пишет — в одной строке плюс — ниже текст. пишу с помощью cms, видимо еще какие то свои настройки влияют, но читала все css ничего не нахожу. Что может вилять на это свойство?

Если у вас переключатель выше текста, остаётся проверить выравнивание, должно быть по левому краю float: left;

Здравствуйте. Я попробовала добавить более 2-х пунктов:

Нажмите здесь, чтобы прочитать больше о CSS!

Нажмите здесь, чтобы прочитать больше о CSS!

Нажмите здесь, чтобы прочитать больше о CSS!

Извиняюсь, при очередном обновлении, упустил одну очень важную деталь )))
Исправил исходники css, сейчас таких косяков не должно быть.

Большое спасибо! Просьба помочь: все получилось, но не склылись квадратные поля с галочками. Как их убрать?

Большое спасибо! Вы очень помогли. все получилось))

Добрый вечер! Установила на сайт в браузере Mozilla. Решила проверить в IE и хроме. Пока не обновила страницу, ничего путного не увидела. После обновления все ОК! Это нормально? Значит мой посетитель не увидит то, что должно быть пока не перезагрузит страницу? Этого же не должно быть? Спасибо.

Демо из статьи у вас в браузере работает сразу? Всё путное видите без обновления страницы?
Ну дык вот. Вы прописали весь «фарш» у себя на сайте, загрузили страницу и не увидели изменений сразу, и лишь после обновления появилось то что вы хотели увидеть. Скорее всего всё дело в кеше(если конечно кеширование у вас на сайте используется), после внесения изменений, как правило его нужно чистить(если не настроен на автомате), так что не переживайте, пользователь всё увидит в лучшем виде

Спасибо, буду надеяться.

Добрый вечер! Очень хорошее решение. Опробовал на своем сайте, работает отлично. Подскажите пожалуйста возможно ли, сделать так, что бы блок закрывался по клику на пустом пространстве в стороне?

Здравствуйте, Дмитрий.
Возможно, и лучше это реализовать с помощью jQuery. Набросал небольшой пример, посмотрите здесь

Добрый день, помогли, спасибо, только после установки на страницу, модуль с правым блоком съехал вниз. Подскажите пожалуйста, как можно вернуть обратно

Читайте также:  Как можно сделать балкон на втором этаже

Агромное спасибо.Как раз искал, как сделать такой блок без скриптов.

Если без особых наворотов, то примерно так: см.пример

Можно ли таким образом скрыть не просто текст, а готовую галерею с кучей фоток?
смысл такой: нажимаю на название скрытого содержимого и раздвигается готовая галерея фотографий на определенную тему, в которой фотки сами прокручиваются. нажимаю на другое название — появляется галерея с другими фотографиями. Готовые галереи у меня уже есть, только нужно их компактно разместить на сайте. Быть может есть для этого более элегантное решение? буду рад помощи и совету)

Можно, почему бы и нет. Так же можете использовать любой «аккордеон» или вкладки (табы), или же подавать галереи по принципу портфолио с фильтрацией работ.

Спасибо за оперативный ответ и шикарный сайт!
Буду пытаться воплотить в жизнь задуманное.

Уважаемый автор, подскажи, ОООчень нужно! Как сделать такое на css?
Пример:
———-
Когда я вернулся в комнату, кирпичики и соляные пирамидки были уже переложены на подоконник и Николай крылышком сметал песок с
Развернуть/свернуть текст >>
———-
При нажатии разворачивается текст, при повторном нажатии сворачивается.
Не нужно никаких рамочек, украшений, переходов и прочих наворотов.
Чисто текст, без эффектов.
Ссылка всегда находиться внизу, под текстом.
Перерыл весь инет, но все решения только на java-скриптах, что не радует.
Нужен только css.
Пытался на твоем примере сделать, но ссылка вниз не ставиться.
Выручайте, зашел в тупик))
Благодарствую заранее!!

Здравствуйте, Роман.
Если я правильно вас понял, то примерно так: тынц >>

Спасибо!! Это то, что нужно!! Самое оно!!

Здравствуйте!
Изменил немного ваш скрипт так как мне нужно чтобы чекбоксы были по умолчанию раскрыты, а закрывались по нажатию. Получилось, что то вроде:
/* скрываем чекбоксы и блоки с содержанием */
.hide <
display: none;
>
.hide:checked + label

ul <
display: none;
>
/* оформляем текст label */
.hide + label <
border-bottom: 1px dotted green;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
>
/* вид текста label при активном переключателе */
.hide:checked + label <
color: red;
border-bottom: 0;
>
/* когда чекбокс активен показываем блоки с содержанием */
.hide + label + ul <
display: block;
background: #efefef;
padding: 10px;
>
Но почему то при закрытии одного, закрываются и все под ним, а те что над ним не закрываются, а я хочу чтобы закрывался каждый в отдельности.
Подскажите, что здесь не так?

Здравствуйте!
Для того чтобы все блоки были раскрыты при загрузке, достаточно в каждый input прописать атрибут checked : см. пример

Это ничто иное, как знак минус (-) в юникоде

Спасибо за ответ. А почему тогда просто было не написпть «-» или это имеет какое то значение?

Попробовал,правила перестают работать. А почему так происходит?

Добрый день, а можно как-то сделать чтобы список раскрывался вверх от элемента по которому жмут мышкой?

Здравствуйте, спасибо за столь подробный материал. Не могли бы Вы ответить на вопрос — можно ли таким образом сделать «спойлер в спойлере»? Или же лучше будет использовать jQuery? Просто подключать ее только ради этого не очень хочется, все же лишняя нагрузка получается.

Здравствуйте.
Спойлер в спойлере, конечно можно. Вот смотрите, набросал вам парочку примеров:
вариант-1 и вариант-2
Это всего лишь примеры, так что элементы спойлера оформите в соответствии дизайна вашего сайта

Огромное Вам спасибо за ответ! Очень помогли.

Спасибо большое за оперативность, как говорится слона-то я и не приметил.
И хоть реклама напрягает, отключил adblock на вашем сайте:)
Кстати, а не подскажете, на основе чего сделана форма комментариев на вашем сайте? Хорошо выглядит.

Спасибо за статью!
А не подскажете, как сделать так:
Нажал на «Нажмите здесь, чтобы открыть» и запись стала: «……Закрыть»

Подскажу)) В своё время, NeedHate предложил интересное решение. Применительно к способу описанному в статье, это будет выглядеть примерно так: тынц >>

olimp-nsk.ru Есть такой сайт там два раскрывающихся списка фото, в блоке «готовые» и «на заказ», клавиша «показать еще» раскрывает одновременно сразу у двух этих блоков по три ряда фото,а надо что бы открывало кадая в своем кто может сказать как поравить сей баг?Заранее благодарен за ответы

скажите а как то можно сделать чтобы например вот на этой странице biolaktis.ru/korm-dlya-po…t/biolaktis-lyx/ таблицы — их две, каждая могла так же по клику разворачиваться и сворачиваться, например «Открыть характеристики», и что куда нужно поставить? я имею в виду код. я попробовал по примеру поставил код в файл css шаблона, и html код на страницу а в него shortcod таблицы — но н ичего ен произошло (/ Спасибо.

Как развернуть все блоки?

нет, все изначально скрыты и по отдельности работают, а, нажав на отдельную кнопку-ссылку (например «раскрыть все»), нужно чтобы раскрывались-скрывались все одновременно)

Здравствуйте. Создавал свой сайт год назад. Воспользовался вашим способом оформления раскрывающихся блоков (огромное спасибо за это, кстати!), предложенным на этой странице. Год назад все работало замечательно. На своем сайте потом в течение года не заходил на страницы с этими раскрывающимися блоками, не проверял их работоспособность. Сайт на Вордпрессе сделан. За год несколько раз обновлялся. И вот теперь случайно зашел на раздел своего сайта с этими блоками и обнаружил, что они работают некорректно. При нажатии на заголовок чекбокс больше не появляется. Проверил код в Адоб Дримвивер. Там все работает. Подскажите пожалуйста, что проверить в первую очередь? Сам не могу додуматься где ошибка. Заранее благодарю.

Читайте также:  Как сделать ссылку на инстаграм через телефон

Добрый день. Как я могу сделать, чтобы блок раскрывался и закрывался по нажатию на заголовок и одновременно с этим, при нажатии на следующий блок, предыдущий закрывался? Изначально все блоки закрыты

Здравствуйте, Кирил.
Всё довольно просто, необходимо поменять флажки type=»checkbox» на переключатели type=»radio» и добавить каждому переключателю атрибут name=»» с одинаковым именем, для блоков из одной группы, примерно так:

отличаются только идентификаторы id=»hd-1″ и id=»hd-2″
Стоит помнить, что при использовании переключателя(radiobutton), может быть отмечен только один элемент группы, а стало быть закрыть с помощью повторного клика не получится, а только при нажатии следующий кнопки.
Посмотрите пример: Тынц

Спасибо за оперативный ответ. Это я понимаю. Хотелось сделать и то и другое, жаль, что на css нет такой возможности

Очень доходчиво, красиво и по делу
Спасибо!!

Здравствуйте, очень полезная статья, но прошу подскажите, можно ли сделать так, что бы текст раскрывался в бок? Сам думал-думал, но ни к чему не пришел.

Добрый день! Подскажите можно ли в скрытый div вставить ссылку на другую страницу сайта.те Если да, то как? У меня при вставке скрытый div становится видимый. Спасибо.

День добрый.
Валерий, скорее всего вы что-то делаете не так, ссылка вставляется без проблем, посмотрите подготовленный пример, всё пучком, без каких-либо багов.

Спасибо за быстрый ответ! Отдельно работает всё как надо), но как только вставляю в сайт, первый скрытый бокс развернутый(. а остальные все закрытые и вродь даже работают.

Добрый день!Подскажите,можно ли input и label обернуть в div?Если да,то как в таком случае сделать, чтобы отображалось скрытое содержание.
Нажмите здесь, чтобы прочитать больше!.
Скрытое содержание…

Как можно сделать чтобы при переходе по ссылке на эту страницу открывался нужный блок?

Не подскажете, как вставить такой текст на страницу вордпрес?
Вставляю код css в style.css и код html на саму страницу — не выходит.

Благодарю за помощь! применила ваше решение для старенького полурабочего) сайта.

Добрый день, подскажите, можно сделать так, чтобы скрытый блок открывался в другом мечте, т.е. вне этого блока, а допустим в конце странице?

Источник

15 потрясающих анимированных эффектов для текста на CSS

Красивый текст и типографика способны сделать Ваш сайт более привлекательным. В веб — дизайне CSS позволяет сделать более интересные эффекты с текстом, при этом вообще не использовать графические редакторы и скрипты. С помощью CSS Вы можете добавить тексту множество различных эффектов, тем самым оживить его.

И для того чтобы это продемонстрировать, представляю Вам подборку из 15 эффектов для текста, которые сделаны только с помощью CSS, но некоторые примеры всё же использовали не большие скрипты.

Спасибо большое http://www.hongkiat.com и обязательно посмотрите следующее:

Эластичная анимация

Этот эффект делается с помощью CSS и SVG, как видите, что результат получился потрясающим.

Глюк с SVG

Хотите, чтобы Ваш текст на сайте имел популярный глюк аналогового телевидения? Это можно сделать с помощью CSS и SVG фильтров

Ретро логотип

Данный логотип сделан на CSS, а также имеет бегунок, который позволит увеличить его.

Эффект сдвига для текста

Как будто текст разрезали острым ножом. Этот эффект сделан с помощью 70 линий на CSS.

Длинная тень для текста

Этот элегантный эффект длинной тени для текста создан только с помощью CSS, и смотрится он удивительно.

Туманный эффект для текста

Отличный туманный эффект в основном для сайтов с тёмным дизайном. Работает данный эффект только в Webkit браузерах

Маска для текста на SVG

See the Pen SVG text mask by Marco Barría (@fixcl) on CodePen.

Анимация для текста

Это на вид простая анимация, но она сделана только на CSS и стоит Вашего внимания.

3d текст

Это игра с CSS тенями, но как Вы можете видеть, результат получился очень классным.

Текст с фоном

Вернее текст тут, как бы, получается прозрачным.

Мигающий текст

Тут мы можем видеть довольно приглушающий свет для текста, который к тому же ещё и периодически мигает.

Анимированная подпись

Это необычный эффект для текста на CSS. Подойдёт для множества сайтов, и точно может привлечь посетителей.

Глюк для страницы с 404 ошибкой

Совершенно необычный и красивый глюк, который можно установить на страницу с 404 ошибкой.

Космос

Довольно интересный и хорошо продуманный логотип с анимацией, которая работает на CSS

See the Pen COSMOS by Patrick Brosset (@captainbrosset) on CodePen.

Загрузка

Это довольно интересный эффект, который можно поставить на предзагрузку Вашего сайта

See the Pen ByVYZK by Ian Gloude (@igloude) on CodePen.

Источник

Оцените статью
Как сделать своими руками
Adblock
detector