WebDesignMagazine.ru – Журнал о веб-дизайне

Как создать древовидный блок комментариев при помощи HTML5 и CSS3

0

В блогах и форумах зачастую встроены древовидные комментарии. В этом уроке мы создадим простой макет древовидных комментариев основанный на HTML5 и CSS3.

Мы рассмотрим, как структурировать HTML5 документ, и как позиционировать элементы, используя CSS. На основе этого базового шаблона, разработчиком будет легко сделать изменения и реализацию такого рода блок комментариев под макет своих веб-сайтов.

Построение хэдера веб-страницы

Начнем с основного HTML шаблона, который мы используем в этом макете. Мы будем придерживаться HTML5 DOCTYPE закодированый в UTF-8, а также некоторых других элементов HTML5. Для веб-браузеров старше Internet Explorer 9, мы включили копию  HTML5shiv скрипта, размещенного на Google dev серверах.

Это позволит новым элементам, таким как

,
и
должным образом отображаться во всех браузерах. Единственной проблемой была бы работа в веб-браузерах с отключенным JavaScript. Вот еще один внешний ресурс для Wellfleet Google Шрифт, который стилизует текст заголовка страницы.

Внутренний body контент

Внутри тегов можно найти целую кучу внутренних div комментариев. Весь макет страницы завернут внутри div с ID #w для обертки. Все выравнивается по центру страницы с фиксированной шириной в 700px.
#container div является тем, что удерживает систему комментариев на месте, вдали от текста заголовка или других элементов страницы. Каждый поток комментариев проводится внутри неупорядоченного списка, где у корня

    есть ID #comments. Каждому внутреннему элементу задается класс  .cmmnt и он воспроизводит практически тот же внутренний контент. Вот пример комментария с макета страницы:

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

    и
    тегов внутри body комментария, который может удерживать дополнительные ссылки для редактирования и обмена.
    Внутренние комментарии используют неупорядоченные списки с классом  .replies, прикрепленый к каждому из них. Это позволяет нам дублировать уровни комментариев на  3 или даже 4 подуровня.

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

    Сбрасывание CSS стилей

    Мы создали документ styles.css, который содержит весь CSS-код для позиционирования и дизайна содержания страницы.
    Следующий фрагмент кода, сбросит все шрифты, поля, отступы, и что более важно,   box-sizing для всех элементов на странице, в каждом браузере. Мы также использовали свойства для динамического обновления цвета CSS Highlight.

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

    Стилизация страницы комментариев

    Каждый .сmmnt пункт списка предназначен для того, чтоб его “толкнули” вправо, с каждым внутренним контейнером

      . Мы установили значение padding-left: 65px; таким образом, чтобы каждый блок был оттеснен в сторону, независимо от длины или высоты. Каждый аватар позиционируется абсолютно по левую сторону, так что наличие дополнительного пэддинга, удерживает содержание подальше от края.

      Мы применили уникальный CSS3 border-radius эффект и переход на аватары. Как только вы наведете курсор на каждый из них, непрозрачность будет постепенно сокращаться до 77% в течение 400 миллисекунд. Это очень интересный эффект при помощи лишь нескольких строк кода.

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

       

Поделиться: