аватар |

Статьи / CSS /

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

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



Для наглядности весь код на одной странице вместе со стилями. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Как интересно оформить комментарий с помощью CSS</title>
  
<style>
  body {
  background: #f0f0f0;
  }

  .comments {
  width: 400px;
  }

  .comment {
  width: 100%;
  margin-bottom: 20px;
  }

  .comment p {
  margin: 0 0 10px 0;
  }

  .dialog {
  position: relative;
  background: #fff;
  padding: 20px;
  color: #222;
  border-radius: 3px;
  margin-left: 20px;
  }

  .dialog::after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 15px solid #fff;
  left: -15px;
  top: 15px;
  }
</style>
  
</head>
<body>
  <div class="comments">
   <div class="comment dialog">
    <p>Привет! Выглядит как сообщение?)</p>
   </div>
  </div>

  <div class="comments">
   <div class="comment dialog">
    <p>Как дела?)</p>
   </div>
  </div>
</body>
</html>

Ну и конечно же пример работы. Смотрим как будет выглядеть комментарий.

Демонстрация Скачать исходники


Спасибо за внимание!
 



Распечатать
Похожие статьи
15 мая 2017 18:13 Как сделать видео фоном блока на CSS?
19 сентября 2014 17:20 Как изменить вид курсора мыши в CSS
08 июня 2017 12:54 Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS?
08 апреля 2013 13:06 Направление и поворот элемента или текста CSS 3
27 ноября 2013 19:53 Набор и примеры элементов Flat UI


Комментарии к статье (vk.com)