Стильная страница 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-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Всегда храни верность своему начальнику - следующий, может быть еще хуже... |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.