• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как создать блок для комментариев на CSS (Как сделать вид блока для комментария или статуса на CSS)
Как создать блок для комментариев на CSS
Kosten
Дата: Понедельник, 2019-02-04, 20:52 | Сообщение 1
Администраторы
Сообщений:24253
Награды: 56


В этой статье подробно разберем, как можно создать блок, который идет под комментарий пользователя или для установки статуса на сайте. Все это строится под диалоговое окно, что можно увидеть в мини чате или в комментариях под материалом. Только здесь все сделаем на чистом 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
Дата: Вторник, 2019-02-05, 02:31 | Сообщение 2
Администраторы
Сообщений:24253
Награды: 56


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



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)
Форум » Web-Раздел » Начинающему вебмастеру » Как создать блок для комментариев на CSS (Как сделать вид блока для комментария или статуса на CSS)
  • Страница 1 из 1
  • 1
Поиск: