[UI] Comment - コメントテンプレート
ブログや記事でよく見るコメントのテンプレートです。
DEMO
a
b
Duis hendrerit dui fermentum aliquet tincidunt. Nam ut neque et diam condimentum congue at id justo. Cras in sodales mauris. Maecenas sit amet lectus pretium, ullamcorper diam sit amet, consequat tortor. Integer feugiat orci lacus, ac ullamcorper ligula.
Morbi vel viverra libero. Nullam ut consectetur tortor, sed ultrices libero. Suspendisse elementum leo quis tincidunt cursus.
HTML
Duis hendrerit dui fermentum aliquet tincidunt. Nam ut neque et diam condimentum congue at id justo. Cras in sodales mauris. Maecenas sit amet lectus pretium, ullamcorper diam sit amet, consequat tortor. Integer feugiat orci lacus, ac ullamcorper ligula.
Morbi vel viverra libero. Nullam ut consectetur tortor, sed ultrices libero. Suspendisse elementum leo quis tincidunt cursus.
CSS
/* -------------------- comment -------------------- */
/* 共通 */
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.comment-entry {
margin-bottom:1em;
}
.comment-box {
margin-bottom:1em;
}
.comment-box .image {
float:left;
max-width:4em;
margin-right:1em;
}
.comment-box .image img {
border-radius: 3px;
}
.comment-box .text {
overflow:hidden;
}
.comment-box h3 {
display:inline-block;
margin:0;
}
.comment-box time {
margin-left:.5em;
font-size:82%;
color:#BBCBC4;
}
.comment-box p {
margin-bottom:0;
}
.comment-box .function i {
margin-left:.7em;
color:#BBCBC4;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.comment-box .function :hover i {
color:#E3E7DE;
}
.comment-box .btn-reply {
display:inline-block;
line-height:1;
padding:.3em .5em;
border-radius: 1em;
background:#BBCBC4;
text-align:center;
text-transform: capitalize;
font-size:75%;
font-weight:bold;
color:#fff;
text-decoration:none;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.comment-box .btn-reply:hover {
background:#E3E7DE;
color:#fff;
}
.comment-box .btn:visited, .comment-box .btn:active {
color:#fff;
}
/* A
----------------------------------------------------------------------------------------------------*/
.comment-entry .child {
margin-left:5em;
}
.comment-entry .child .image {
max-width:3em;
}
/* B
----------------------------------------------------------------------------------------------------*/
.comment-entry .child .image {
max-width:3em;
}
.child {
display:inline-block;
position: relative;
padding:1em;
margin-bottom:0;
border-top:1px solid #E5E3E3;
border-bottom:1px solid #E5E3E3;
background:#F9F7F7;
}
.child + .child {
position: relative;
top:-1px;
}
.child:after, .child:before {
position: absolute;
bottom: 100%;
left: 50%;
content: " ";
height: 0;
width: 0;
}
.child:after {
border:10px solid transparent;
border-bottom:10px solid #F9F7F7;
margin-left: -10px;
}
.child:before {
border:11px solid transparent;
border-bottom:11px solid #E5E3E3;
margin-left: -11px;
}
Lionel Messi
Duis hendrerit dui fermentum aliquet tincidunt. Nam ut neque et diam condimentum congue at id justo. Cras in sodales mauris. Maecenas sit amet lectus pretium, ullamcorper diam sit amet, consequat tortor. Integer feugiat orci lacus, ac ullamcorper ligula.
Andrés Iniesta
Morbi vel viverra libero. Nullam ut consectetur tortor, sed ultrices libero. Suspendisse elementum leo quis tincidunt cursus.