НашСамогон - самогонные аппараты, дубовые бочки, винные и турбо дрожжи, электроника и оборудование для производства алкоголя в домашних условиях.

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

0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Поделиться:

Об Авторе

Главный редактор портала WebDesignMagazine.ru. Пишу статьи и делаю переводы для веб-сайта, занимаюсь продвижением журнала в социальных сетях и PR-каналах, а также несу ответственность за маркетинговые стратегии нашего проекта.