Компонент Комментарий Comment
Создавайте и стилизуйте блоки с комментариями на сайте, например, для раздела блога на вашем сайте. Компонент по умолчанию включает в себя стили для комментариев.
Блоки комментариев
Комментарии на сайте. Содержимое. Разметка.
Компонент Комментарии состоит из самого комментария, заголовка (шапка) комментария, включая аватарку, заголовок (имя автора) и метаданные, и тела комментария.
| Класс |
Описание |
| .uk-comment |
Добавьте этот класс, чтобы определить компонент Комментарий . |
| .uk-comment-header |
Добавьте этот класс для создания шапки (вводный контент) комментария. |
| .uk-comment-avatar |
Добавьте этот класс к элементу ![]() , чтобы создать аватар для автора комментария. |
| .uk-comment-title |
Добавьте этот класс в заголовок, чтобы создать заголовок из имени автора комментария. |
| .uk-comment-meta |
Добавьте этот класс для создания метатекста комментарию, например, с использованием суб-навигации. |
| .uk-comment-body |
Добавьте этот класс для создания тела комментария. |
Разметка. Пример
Если необходимо для изображения-аватарки установить круглую форму, добавьте к .uk-comment-avatar класс .uk-border-circle из компонента Утилита (модификатор Border radius).
Настасья
Да вот теперь у них под властью парни: ты с ними в ладу и, конечно, их не обидишь, потому что они твои. Словом, все было отлично, как не выдумать ни природе, ни искусству, когда они соединятся вместе.
Самый лучший и самый правильный выход из ситуации: забыть все плохое, сохранить в памяти хорошие моменты, просто сказать спасибо за все что мы пережили. И пойти дальше. Потому что все, что с нами происходит — к лучшему. Ачарья Раджниш
Да вот теперь у них под властью парни: ты с ними в ладу и, конечно, их не обидишь, потому что они твои. Словом, все было отлично, как не выдумать ни природе, ни искусству, когда они соединятся вместе.
Модификатор «Primary»
Чтобы изменить стиль комментария, например выделить его как комментарий администратора или модератора, просто добавьте класс .uk-comment-primary .
Зинуля
Никогда не слушайте осуждений в свой адрес. Ибо, даже если бы вы умели ходить по воде, то будьте уверены, кто-нибудь обязательно скажет: «Смотрите, он даже не умеет плавать». © Маргарет Тэтчер
Никогда не слушайте осуждений в свой адрес. Ибо, даже если бы вы умели ходить по воде, то будьте уверены, кто-нибудь обязательно скажет: «Смотрите, он даже не умеет плавать». © Маргарет Тэтчер
Cписок комментариев
Как создать список комментариев
, чтобы создать список комментариев. Вы можете вложить любое количество элементов
Ответить
Однако ж, собраться мужики с колхоза, который был, к счастью, неподалеку. Так как подобное зрелище для здоровяка сущая благодать, то скоро около экипажа накопилась их стадо, и в селе остались только старые бабоньки да малые ребята.
Ответить
Откуда возьмется и надутость, и чопорность, станет комментарить по вытверженным наставлениям, станет ломать голову и придумывать, с кем, и как, и сколько нужно писать, как на кого смотреть, всякую минуту будет бояться, чтобы не ляпнуть больше, чем нужно, запутается милец.
Ответить
Последние слова он уже сказал, обратившись, как обыкновенно случается с ведущими разговор, когда один из них вдруг, неизвестно по какой причине, обратится не к тому, к которому относятся речи, а к какому-нибудь нечаянно пришедшему третьему.
Доступность
Установите соответствующие роли, состояния и свойства WAI-ARIA для компонента «Комментарий».
Установите роль comment для каждого комментария.
Как создать блок для комментария или статуса на CSS
Как создать красивый блок для комментария или статуса на CSS в форме диалогового сообщения. Возможно, Вам наскучило типичное оформление всех сайтов?
Для наглядности весь код на одной странице вместе со стилями.
Как интересно оформить комментарий с помощью CSS
Привет! Выглядит как сообщение?)
Ну и конечно же пример работы. Смотрим как будет выглядеть комментарий.
Как создать древовидный блок комментариев при помощи HTML5 и CSS3
В блогах и форумах зачастую встроены древовидные комментарии. В этом уроке мы создадим простой макет древовидных комментариев основанный на HTML5 и CSS3.
Мы рассмотрим, как структурировать HTML5 документ, и как позиционировать элементы, используя CSS. На основе этого базового шаблона, разработчиком будет легко сделать изменения и реализацию такого рода блок комментариев под макет своих веб-сайтов.
Построение хэдера веб-страницы
Начнем с основного HTML шаблона, который мы используем в этом макете. Мы будем придерживаться HTML5 DOCTYPE закодированый в UTF-8, а также некоторых других элементов HTML5. Для веб-браузеров старше Internet Explorer 9, мы включили копию HTML5shiv скрипта, размещенного на Google dev серверах.
HTML5 & CSS3 комментарии
Обратите внимание, что даже самый низкий уровень древовидных комментариев следует точно такому же форматированию, как и верхний уровень.
Сбрасывание CSS стилей
Мы создали документ styles.css, который содержит весь CSS-код для позиционирования и дизайна содержания страницы.
Следующий фрагмент кода, сбросит все шрифты, поля, отступы, и что более важно, box-sizing для всех элементов на странице, в каждом браузере. Мы также использовали свойства для динамического обновления цвета CSS Highlight.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >html < height: 101%; >body < background: #e3e0ef url('images/bg.png'); font-size: 62.5%; line-height: 1; font-family: Arial, sans-serif; padding-bottom: 65px; >::selection < background: #d7d0f3; >::-moz-selection < background: #d7d0f3; >::-webkit-selection < background: #d7d0f3; >article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >strong < font-weight: bold; >table < border-collapse: collapse; border-spacing: 0; >img
Двигаемся дальше. Мы включил код для сброса основных стилей на h1 элементе и параграфов на странице. Нам нужно настроить основные структуры для обёртки и контейнеров див. На контейнере, мы включили несколько CSS3 свойств для теней, чтобы выделиться из общего фона.
h1 < font-family: 'Wellfleet', 'Trebuchet MS', Tahoma, Arial, sans-serif; font-size: 2.85em; line-height: 1.6em; font-weight: normal; color: #756f8b; text-shadow: 0px 1px 1px #fff; margin-bottom: 21px; >p < font-family: Arial, Geneva, Verdana, sans-serif; font-size: 1.3em; line-height: 1.42em; margin-bottom: 12px; font-weight: normal; color: #656565; >a < color: #896dc6; text-decoration: none; >a:hover < text-decoration: underline; >/* page layout structure */ #w < display: block; width: 700px; margin: 0 auto; padding-top: 35px; >#container
Стилизация страницы комментариев
#comments < display: block; >#comments .cmmnt, ul .cmmnt, ul ul .cmmnt < display: block; position: relative; padding-left: 65px; border-top: 1px solid #ddd; >#comments .cmmnt .avatar < position: absolute; top: 8px; left: 0; >#comments .cmmnt .avatar img < -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.44); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.44); box-shadow: 1px 1px 2px rgba(0,0,0,0.44); -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -ms-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; >#comments .cmmnt .avatar a:hover img
. Мы установили значение padding-left: 65px; таким образом, чтобы каждый блок был оттеснен в сторону, независимо от длины или высоты. Каждый аватар позиционируется абсолютно по левую сторону, так что наличие дополнительного пэддинга, удерживает содержание подальше от края.
Мы применили уникальный CSS3 border-radius эффект и переход на аватары. Как только вы наведете курсор на каждый из них, непрозрачность будет постепенно сокращаться до 77% в течение 400 миллисекунд. Это очень интересный эффект при помощи лишь нескольких строк кода.
#comments .cmmnt .cmmnt-content < padding: 0px 3px; padding-bottom: 12px; padding-top: 8px; >#comments .cmmnt .cmmnt-content header < font-size: 1.3em; display: block; margin-bottom: 8px; >#comments .cmmnt .cmmnt-content header .pubdate < color: #777; >#comments .cmmnt .cmmnt-content header .userlink < font-weight: bold; >#comments .cmmnt .replies
В этой последней части CSS кода, все что мы делаем, это позиционируем содержание, чтобы иметь дополнительный пэддинг, и обновляем цветовые схемы.
FlexBox верстка блока с комментариями
FlexBox – новый мощный способ верстки макетов, с помощью которого процесс веб-разработки значительно упрощается. Практически все современные браузеры поддерживают FlexBox , поэтому неплохо будет применять этот метод для решения своих повседневных задач.
В этой небольшой статье будет рассказано о том, как можно сверстать блок с комментариями, используя FlexBox-свойства CSS. Мы обратим внимание на самые интересные моменты верстки макетов, чтобы показать все преимущества такого подхода.
Немного теории
Перед тем как начать знакомиться с примерами из статьи, хотелось бы сделать небольшое теоретическое отступление. Итак, во FlexBox верстке участвую 2 типа элементов: контейнер и элементы, входящие в него и являющиеся его потомками.
Внутри контейнера существуют 2 оси: основная (main axis) и кросс-ось (cross axis), которая расположена перпендикулярно основной оси.
Элементы внутри контейнера выстраиваются, как правило, сначала по основной оси, а уже потом по кросс-оси.
Какие правила CSS мы собираемся использовать
CSS-правила из спецификации по FlexBox также можно разделить на 2 группы: одни применяются к flex-контейнеру (гибкому контейнеру), другие - к flex-элементам (гибким элементам).
Итак, давайте рассмотрим некоторые CSS-свойства, используемые при создании FlexBox верстки:
- display: flex — применяется к контейнеру. Активирует flex режим и заставляет элементы, находящиеся внутри контейнера следовать правилам FlexBox. Варианты значений: flex | inline-flex .
- justify-content — это свойство применяется к контейнеру. Оно определяет по какой стороне будут выравнены элементы (варианты значений: flex-start | flex-end | center | space-between | space-around . Работает аналогично CSS-свойству text-align ). Подробности о свойстве justify-content ;
- order — применяется к элементам, находящимся внутри контейнера. order позволяет контролировать порядок расположения элементов внутри контейнера (по-умолчанию они отображаются в таком же порядке, как расположены в коде страницы). Мы будем использовать это мощный инструмент в нашем блоке с комментариями для размещения рядом текста и изображений. Подробности о свойстве order ;
- flex-wrap — правило применяется к контейнеру (варианты значений: nowrap | wrap | wrap-reverse ). По-умолчанию, элементы в контейнере выстраиваются по одной линии. С помощью правила flex-wrap вы можете изменить поведение элементов в контейнере, позволив им перестраиваться ниже, образуя еще одну линию. Значения правила учитывают направление элементов. Подробности о правиле flex-wrap ;
Макет
Необходимо, чтобы блок с комментариями, который мы верстаем, соответствовал определенным требованиям:
- Каждый комментарий должен состоять из: аватара и имени комментатора, времени добавления и текста комментария;
- В блоке с комментариями должно быть 2 вида комментариев: первый — написанный автором (окрашен в бледно-зеленый цвет и расположен справа), второй вид: все остальные, написанные посетителями;
- Структура HTML-разметки обоих видов комментариев должна быть по возможности похожей;
- Верстка должна быть адаптивной;
Используя FlexBox, все это можно реализовать с помощью нескольких строк CSS-кода.
Итак, давайте перейдем к делу!
HTML
Структура HTML-кода довольно проста. Она включает в себя простой список комментариев и форму для добавления новых комментариев, расположенную под списком.
Анна Серебрякова4 часа назад
Suspendisse gravida sem?
Евгений Смирнов3 hours ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse gravida sem sit amet molestie portitor.
Если рассмотреть приведенный выше код повнимательней, можно заметить, что за структура элементов в комментарии автора и комментарии простого пользователя одинаковая. Отличаются только CSS-классы: блоку с комментариями автора присвоен класс .author-comment , а блок с комментарием обычного посетителя имеет класс .user-comment
CSS
В этом разделе мы рассмотрим CSS-код, который мы использовали при создании верстки блока с комментариями. Здесь буду показаны только основные моменты, поэтому, если вы хотите ознакомиться с код полностью, скачайте архив с демо-страничкой по ссылке, расположенной в конце статьи.
Сначала, нужно присвоить элементу, в котором хранится комментарий, CSS-правило display: flex; . После этого мы сможем применять FlexBox CSS к комментариям и их потомкам.
.comment
.comment.author-comment
В результате их применения блок с комментариями будет выглядеть следующим образом:
Итак, сейчас блоки с комментариями автора выравнены справа, но нам также нужно чтобы все содержимое блоков, отображалось в обратном порядке: сначала отображался текст комментария, а затем аватар и информация о комментарии. Чтобы этого добиться, нужно использовать правило order .
.comment.author-comment .info .comment.author-comment .avatar .comment.author-comment p
Как вы можете видеть, с помощью FlexBox, процесс верстки становится легче.
Теперь блок с комментариями выглядит так, как мы хотели. Осталось только убедиться, что он также хорошо выглядит на экранах мобильных устройств. Так как экраны мобильных устройств довольно узкие, мы должны сделать некоторые изменения в CSS коде, чтобы наш контент был доступен посетителям, владеющим мобильными устройствами.
Мы будем использовать media-запросы (media-queries) для того чтобы растянуть блоки с комментариями на всю ширину экрана мобильного устройства. Также необходимо передвинуть аватарку и информацию о комментаторе под блок с текстом комментария. Для этого используя правило flex-wrap со значением wrap .
@media (max-width: 800px) < /* Изменяем порядок элементов внутри комментария. Аватар размещаем после блока с текстом */ .comment.user-comment .info.comment.user-comment .avatar .comment.user-comment p /* Увеличиваем ширину блока с текстом комментария — переносим аватар и информацию о пользователе на следующую*/ .comment p /* Перемещаем влево к началу контейнера все элементы, находящиеся внутри комментария автора */ .comment.author-comment >
Чтобы увидеть эффект от применения приведенного выше кода, сравним следующий скриншот с одним из представленных выше. Попробуйте изменить размер окна браузера, чтобы увидеть как изменяется внешний вид блока с комментариями.
Заключение
Итак, пора подвести итоги урока. Надеемся, что практический пример, приведенный в этой статье, поможет вам разобраться в FlexBox верстке и вдохновит вас на использование это подхода в ваших реальных проектах.
Если вам интересно получить дополнительную информацию о FlexBox, предлагаем вам несколько ресурсы, которые могут быть вам полезны:
- Список CSS-трюков, связанных с FlexBox
- Углубленная статья на MDN
- Простое решение классических CSS-задач с помощью FlexBox
При написании статьи использовались следующие ресурсы:
- http://tutorialzine.com/2015/11/using-flexbox-to-create-a-responsive-comment-section/
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Скачать архив с кодом из статьи