Коментарі в стилі діалогів

Нарешті дійшли руки зробити нові коментарі у вигляді діалогів. За основу взяв оформлення CSS3. Попри те, що у прикладах погарячкували з z-index, який я у своєму багатошаровому стилі не виставлю ніколи в житті, виявилося, що можна обійтися і без нього, оскільки однаково :after накладається зверху. Єдине обмеження — треба робити величенький відступ зліва для тексту всередині елемента, щоб білий прямокутник його не затуляв. Вийшло доволі симпатично, по-моєму, — навіть у Internet Explorer виглядає мило.

Робиться така штучка дуже просто — у шаблоні, де описуються стилі класів, додаємо приблизно таке:

.comment-actions{
display:block;
}

.comment-content{
display:inline-block;
padding: 7px 20px 7px 20px;
background:white;
border: 1px solid grey;
border-radius:10px;
box-shadow:4px 5px 5px 0px grey;
}

.comment-content:before{
content:'';
position:absolute;
top:29px;
left:-8px;
width:20px;
height:10px;
-webkit-transform:rotate(70deg) skewX(-30deg);
-moz-transform:rotate(70deg) skewX(-30deg);
-o-transform:rotate(70deg) skewX(-30deg);
-ms-transform:rotate(70deg) skewX(-30deg);
background: white;
border:1px solid grey;
}

.comment-content:after{
content:'';
position:absolute;
left:1px;
top:27px;
width:19px;
height:20px;
background:white;
}


Якщо прибрати оті display, всі коментарі будуть однакової ширини — максимальної.

Далі...