Как сделать комментарии в css

Красивый комментарий в css или как сделать словесный пузырь

Всем привет. Возможно, вас удивили слова из названия поста "словесный пузырь"? И вы в недоумении, какое отношение пузырь, да еще словесный, имеет к красивым комментариям? Начну с объяснения, что называется словесным пузырем.
Что такое словесный пузырь?

Любому из вас на глаза попадались комиксы. Их отличие в том, что диалоги между персонажами помещаются в такие рамочки, похожие на тучки или пузырьки со словами. Собственно говоря, эти рамочки и называются — словесный пузырь.

Но какое они имеют отношение к красивым комментариям? Здесь я лучше не расскажу, а просто покажу. Смотрите пример, что можно сделать со словесными пузырями в комментариях:

Красивый комментарий в css или как сделать словесный пузырь,

Конечно, полет фантазий можно расширить и словесный пузырь для комментария сделать намного красивее, чем у меня в примере.
Хочу предложить вам кода красивых словесных пузырей, которые будут работать во всех браузерах, где только будет задействован единственный элемент HTML и несколько строк кода CSS3. А самое важное, что мы обойдемся без картинок и без лишнего JavaScript. Ну как, готовы. Тогда приступим!

Красивый комментарий в css или как сделать словесный пузырь,

Замените только код CSS, чтобы увидеть другой эффект.

Красивый комментарий в css или как сделать словесный пузырь,

Замените только код CSS, чтобы увидеть другой эффект.

Красивый комментарий в css или как сделать словесный пузырь,

Замените только код CSS, чтобы увидеть другой эффект.

Красивый комментарий в css или как сделать словесный пузырь,

Здесь мы немного усложним задачу. Сделаем словесный пузырь с закругленными углами, добавим тень и указатель слов сместим влево, а не по центру.
Обратите внимание на строку 28 и 35. Вы можете регулировать параметры left для смещения указателя слов. В строке 28 и 35 параметры должны быть аналогичны друг другу. Смотрим пример.

Красивый комментарий в css или как сделать словесный пузырь

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

Как сделать — Примечание

Узнать, как создать "примечание" с помощью CSS.

Примечание

Примечания могут быть использованы для уведомления пользователя о чем-то особенном: опасности, успехе, информации или предупреждении

Опасность! Некоторый текст.

Успех! Некоторый текст.

Информации! Некоторый текст.

Предупреждение! Некоторый текст.

Создать примечание

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

Совет:Кроме того, проверить Alerts.

Упражнения
Тесты
КАК СДЕЛАТЬ
ПОДЕЛИТЬСЯ
СЕРТИФИКАТЫ

Сообщить об ошибке

Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь, присылайте нам электронное письмо:

Ваше предложение:

Спасибо, за вашу помощь!

Ваше сообщение было отправлено в SchoolsW3.

Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты

SchoolsW3 оптимизирован для обучения, тестирования и тренировки. Примеры упрощают и улучшают чтение и базовое понимание. Учебники, справочники, примеры постоянно пересматриваются, для того, чтобы избежать ошибки, невозможно гарантировать правильность всего содержимого. Используя данный сайт, вы соглашаетесь прочитать и принять условия использования, cookie и Политика конфиденциальности. Авторское право 1999 — 2021 Все права защищены.
Работает на W3.CSS.

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

В блогах и форумах зачастую встроены древовидные комментарии. В этом уроке мы создадим простой макет древовидных комментариев основанный на 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 кода, все что мы делаем, это позиционируем содержание, чтобы иметь дополнительный пэддинг, и обновляем цветовые схемы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *