аватар |

Статьи / 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>

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

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


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



Распечатать
Похожие статьи
05 сентября 2013 16:22 Как заменить изображение при наведении на него курсора? CSS
08 июня 2017 12:54 Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS?
28 ноября 2014 12:57 Плавное увеличение изображения при наведении CSS
03 октября 2014 10:40 Как вызвать кроссбраузерную анимацию загрузки на CSS 3?
27 ноября 2013 20:20 Как сделать элемент чёрно-белым и обратно цветным средствами CSS?


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