Стильная страница FAQ с использованием только CSS3
Обычно страница FAQ представляет собой длинный текст с большим количеством вопросов и ответов на них. Данную страницу ищут тогда, когда нужна дополнительная информация по работе сайта. В данном уроке мы сделаем стильную страницу FAQ с помощью только CSS3, без использования JavaScript.
Идея
Help Center Facebook использует отличный эффект для предварительного показа ответа на вопрос. Там выводится отрывок маленьким шрифтом и с затемнением. А когда посетитель нажимает на вопрос, текст ответа увеличивается и выводится полностью.
В нашем уроке мы создадим подобный эффект, используя только CSS3.
HTML
Начнем с разметки структуры документа:
<section class="faq-section"> <input type="checkbox" id="q1"> <label for="q1">Вопрос?</label> <p>... Вводный абзац, который будет обрезаться ...</p> <p>... Дополнительная информация ...</p> </section>
- На выше приведенном рисунке видно, что метка будет заголовком раздела. Но вы можете поместить
label
вh1
, если хочется соблюдать правила семантики. - С помощью
label::before
создадим треугольник справа. - Первый абзац каждой секции будет конвертироваться в описательный отрывок ответа на вопрос.
Принцип действия
Никаких ракетных технологий здесь не используется. Здесь задействован трюк с чекбоксом для связки элементов <input type="checkbox" id="abc">
и <label for="abc">
. А сам чекбок скрывается от глаз читателя страницы.
CSS
Ниже приводится код с комментариями:
/*Добавляем поля*/ .faq-section{ margin: 40px 0; } /*Скрываем чекбоксы и абзацы*/ .faq-section input, .faq-section p{ display: none; } /*Показываем только обрезанное введение */ .faq-section label+p{ display: block; color: #999; font-size: .85em; transition: all .15s ease-out; /* Clipping text */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /*Если чекбокс отмечен, показываем все абазацы*/ .faq-section input[type=checkbox]:checked~p{ display: block; color: #444; font-size: 1em; /* Восстанавливаем обрезание по умолчаниюы */ text-overflow: clip; white-space: normal; overflow: visible; } /*Стили для метки*/ .faq-section label{ font-size: 1.2em; cursor: pointer; background: #eee; display: block; position: relative; padding: 7px 10px; font-weight: bold; border: 1px solid #ddd; border-left: 3px solid #888; text-shadow: 0 1px 0 rgba(255,255,255,.5); transition: all .15s ease-out; } /*Удаляем выделение текста при переключении*/ .faq-section label::selection{ background: none; } .faq-section label:hover{ background: #f5f5f5; } /*Если чекбокс отмечен, устанавливаем стили соответственно*/ .faq-section input[type=checkbox]:checked~label{ border-color: #ff7f50; background: #f5deb4; background-image: linear-gradient(to bottom, #fff, #f5deb4); box-shadow: 0 0 1px rgba(0,0,0,.4); } /*Стрелка метки - состояние по умолчанию*/ .faq-section label::before{ content: ''; position: absolute; right: 4px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left-color: inherit; } /*Обновляем стрелку справа*/ .faq-section input[type=checkbox]:checked~label::before{ border: 6px solid transparent; border-top-color: inherit; margin-top: -3px; right: 10px; }
Поддержка браузерами
Как насчет вывода нашей страницы в старых браузерах? Отличный вопрос. И ответом является приемлемая деградация внешнего вида:
С помощью следующего кода мы заботимся о браузерах IE8 и старше, чтобы сохранить содержание нашей страницы для посетителей, использующих старые инструменты.
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <style> .faq-section label, .faq-section label:hover{ cursor: default; background: #eee; } body .faq-section p{ /* Increase specificity */ display: block; color: #444; font-size: 1em; text-overflow: clip; white-space: normal; overflow: visible; } </style> <![endif]-->
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/aYVfcXCY1k0/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Каждый человек имеет право на собственное мнение — при условии, что оно совпадает с нашим Шоу Джордж Бернард - 1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.