Как создать блок для комментариев на CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Форум » Web-Раздел » Начинающему вебмастеру » Как создать блок для комментариев на CSS (Как сделать вид блока для комментария или статуса на CSS)

Как создать блок для комментариев на CSS

Kosten

Понедельник, 04 Февраля 2019 | Сообщение 1

Администраторы

Сообщений:44355

Награды: 70

« 555 »

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

Это материал больше для тех, кто хочет на своем сайте создать что то оригинальное и не похожее на стандартный вид. Здесь представлена сама форма конструкций, где уже сам веб разработчик по надобности может добавить стилей на тени или обвода. вообщем тематически сделать оформление, чтоб еще под общий дизайн подходило.

Так выглядит на светлом формате:

Здесь уже добавлен более темнее цвет, который указан в стилистике:

Приступаем к установке:

HTML

Код

<div class="downgas-disapoinuv">
   <div class="vanuseb-stradeg sapmprovinus">
    <p>Здесь идут посты или ответы</p>
   </div>
  </div>

  <div class="downgas-disapoinuv">
   <div class="vanuseb-stradeg sapmprovinus">
    <p>Где происходит общение</p>
   </div>
  </div>

CSS

Код

  .downgas-disapoinuv {
  width: 295px;
  }

  .vanuseb-stradeg {
  width: 100%;
  margin-bottom: 18px;
  }

  .vanuseb-stradeg p {
  margin: 0 0 8px 0;
  }

.sapmprovinus {
    position: relative;
    background: #2a4369;
    padding: 17px;
    color: #f5f5f5;
    border-radius: 2px;
    margin-left: 23px;
}

.sapmprovinus::after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 8px solid rgb(175, 170, 170);
    border-bottom: 8px solid rgb(175, 170, 170);
    border-right: 15px solid #2c4469;
    left: -15px;
    top: 14px;
}

Также можно посмотреть как все будет а реальности смотреться.

Демонстрация

Прикрепления: 7307116.png (5.3 Kb) · 5244563.png (5.7 Kb)

Страна: (RU)

Kosten

Вторник, 05 Февраля 2019 | Сообщение 2

Администраторы

Сообщений:44355

Награды: 70

« 555 »

Еще один вид, который можно сделать под комментарий или разместить описание.

HTML

Код

<p>Здесь может быть описание или комментарий.</p>

CSS

Код

p {
    position: relative;
    background: #f1eded;
    padding: 23px;
    background-color: #f1f1f1;
    border: 2px solid #8a8181;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 50px;
    -webkit-box-shadow: 2px 2px 4px #4c4949;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 0px 3px 12px #423e3e;
}
p:after, p:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

p:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #f1f1f1;
    border-width: 18px;
    left: 4%;
    margin-left: -18px;
}
p:before {
    border-color: rgba(241, 241, 241, 0);
    border-bottom-color: #5d6360;
    border-width: 20px;
    left: 4%;
    margin-left: -20px;
}

Демонстрация

Прикрепления: 7853242.jpg (17.2 Kb)

Страна: (RU)

Страница 1 из 1
1