.chat-bubble {
background-color: #ededed;
border: 2px solid #666;
font-size: 35px;
line-height: 1.3em;
margin: 10px auto;
padding: 10px;
position: relative;
text-align: center;
width: 300px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
font-family: 'Bangers', arial, serif;
}
.chat-bubble-arrow-border {
border-color: #666 transparent transparent transparent;
border-style: solid;
border-width: 20px;
height: 0;
width: 0;
position: absolute;
bottom: -42px;
left: 30px;
}
.chat-bubble-arrow {
border-color: #ededed transparent transparent transparent;
border-style: solid;
border-width: 20px;
height: 0;
width: 0;
position: absolute;
bottom: -39px;
left: 30px;
}

При обсуждении применения облаков с текстом на ум приходит множество идей пользовательского интерфейса. Они удобны для комментариев в споре, создании досок объявлений или отображении цитируемого текста. Просто добавьте следующие классы в свою таблицу стилей и найдите соответствующие коды HTML в этом посте о фрагментах CSS3.

Добавлено: 12 Апреля 2018 07:20:14 Добавил: Андрей Ковальчук Нравится 0

Добавить