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

На­реш­ті ді­йшли ру­ки зро­би­ти но­ві ко­мен­та­рі у ви­гля­ді діа­л­огів. За ос­но­ву взяв офор­м­лен­ня 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, всі ко­мен­та­рі бу­дуть од­на­ко­вої ши­ри­ни — мак­си­маль­ної.

Далі...