[UI] UI Components : Mobile Messaging

アプリなどでよく使われるメッセージUI

DEMO

a

Lionel Messi

Praesent facilisis, purus nec condime hendrerit, magna tortor gravida urna.12:45 pm

Andrés Iniesta

Magna tortor gravida urna, id laoreet elit justo et est. Nulla dolor tortor.12:46 pm

Luis Suárez

Kurus nec condime hendrerit urna.12:47 pm

Andrés Iniesta

Curabitur in quam id sem gravida mollis a vitae libero. In vitae ultrices.12:48 pm

Franck Ribery

Nunc suscipit felis.13:00 pm

b

Lionel Messi

Praesent facilisis, purus nec condime hendrerit, magna tortor gravida urna.12:45 pm

Andrés Iniesta

Magna tortor gravida urna, id laoreet elit justo et est. Nulla dolor tortor.12:46 pm

Luis Suárez

Kurus nec condime hendrerit urna.12:47 pm

Andrés Iniesta

Curabitur in quam id sem gravida mollis a vitae libero. In vitae ultrices.12:48 pm

Franck Ribery

Nunc suscipit felis.13:00 pm

c

Lionel Messi

Praesent facilisis, purus nec condime hendrerit, magna tortor gravida urna.12:45 pm

Andrés Iniesta

Magna tortor gravida urna, id laoreet elit justo et est. Nulla dolor tortor.12:46 pm

Luis Suárez

Kurus nec condime hendrerit urna.12:47 pm

Andrés Iniesta

Curabitur in quam id sem gravida mollis a vitae libero. In vitae ultrices.12:48 pm

Franck Ribery

Nunc suscipit felis.13:00 pm

d

Lionel Messi

Praesent facilisis, purus nec condime hendrerit, magna tortor gravida urna.12:45 pm

Andrés Iniesta

Magna tortor gravida urna, id laoreet elit justo et est. Nulla dolor tortor.12:46 pm

Luis Suárez

Kurus nec condime hendrerit urna.12:47 pm

Andrés Iniesta

Curabitur in quam id sem gravida mollis a vitae libero. In vitae ultrices.12:48 pm

Franck Ribery

Nunc suscipit felis.13:00 pm

HTML

 

  

  

   

    
Lionel Messi
    Praesent facilisis, purus nec condime hendrerit, magna tortor gravida urna.
    12:45 pm
   
  
 
 

  

  

   

    
Andrés Iniesta
    Magna tortor gravida urna, id laoreet elit justo et est. Nulla dolor tortor.
    12:46 pm
   
  
 
 

  

  

   

    
Luis Suárez
    Kurus nec condime hendrerit urna.
    12:47 pm
   
  
 
 

  

  

   

    
Andrés Iniesta
    Curabitur in quam id sem gravida mollis a vitae libero. In vitae ultrices.
    12:48 pm
   
  
 
 

  

  

   

    
Franck Ribery
    Nunc suscipit felis.
    13:00 pm
   
  
 

CSS

/* -------------------- Mobile Messaging -------------------- */
/* 共通 */
* {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.clearfix:before, .clearfix:after {
 content: "";
 display: block;
 overflow: hidden;
}
.clearfix:after {
 clear: both;
}
.message .text-inner h3 {
 margin:0;
}
.message .text-inner time {
 display:block;
 text-align:right;
 font-size:12px;
 font-weight:normal;
 color:#bbb;
 text-transform:uppercase;
}
/* A
----------------------------------------------------------------------------------------------------*/
.message {
 padding:.5em .5em 0;
 background:#E5E5E5;
}
.message-box {
 margin-bottom:.6em;
}
.message-you .image {
 float:left;
 max-width: 3em;
 margin:0 1em 0 0;
}
.message-me .image {
 float:right;
 max-width: 2.4em;
 margin:0 0 0 1em;
}
.message-box .image img {
 border-radius: 3em;
}
.message-box .text {
 position: relative;
 border-radius:8px;
 box-shadow: 0 2px rgba(0,0,0,.1);
 -webkit-box-shadow: 0 2px rgba(0,0,0,.1);
 background:#fff;
}
.message-box .text:before {
 position: absolute;
 content: " ";
 height: 20px;
 width: 20px;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 box-shadow: 2px 2px rgba(0,0,0,.1);
 -webkit-box-shadow: 2px 2px rgba(0,0,0,.1);
 background:#fff;
}
.message-box .text-inner {
 padding:.5em .7em;
 line-height:1.4;
 background:#fff;
 border-radius:8px;
 /* transform z-index hack */
 transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 font-size:14px;
 color:#666;
}
.message-you .text {
 margin-left:3.8em;
}
.message-you .text:before {
 left: -2px;
 top: 10px;
}
.message-me .text {
 margin-right:3.2em;
}
.message-me .text:before {
 right: -2px;
 top: 10px;
}
.message-me .text-inner, .message-me .text, .message-me .text:before {
 background:#EAF4FB;
}
/* B
----------------------------------------------------------------------------------------------------*/
.message {
 background:#fff;
}
.message-box {
 padding:.5em;
 border-bottom:#eee 1px solid;
}
.message-you .image {
 float:left;
 max-width: 3em;
 margin:0 .5em 0 0;
}
.message-me .image {
 float:right;
 max-width: 2.4em;
 margin:0 0 0 .5em;
}
.message-box .image img {
 border-radius: 2px;
}
.message-box .text {
 line-height:1.4;
 font-size:14px;
 color:#666;
}
.message-you .text {
 margin-left:3.5em;
}
.message-me .text {
 margin-right:2.9em;
}
/* C
----------------------------------------------------------------------------------------------------*/
.message {
 padding:.5em;
 background:#fff;
}
.message-box {
}
.message-you .image {
 float:left;
 max-width: 3em;
 margin:0 .5em 0 0;
}
.message-me .image {
 float:right;
 max-width: 2.4em;
 margin:0 0 0 .5em;
}
.message-box .image img {
 margin-top:1em;
 border-radius: 2px;
}
.message-box .text {
 position: relative;
 padding:1em;
 border-radius:15px;
 background: #fff;
 line-height:1.4;
 font-size:14px;
 color:#666;
}
.message-box .text:after, .message-box .text:before {
 position: absolute;
 content: " ";
 height: 0;
 width: 0;
}
.message-you .text:after, .message-you .text:before {
 right: 100%;
 top: 2.2em;
}
.message-you .text:after {
 border:6px solid transparent;
 border-right:6px solid #fff;
}
.message-you .text:before {
 border:7px solid transparent;
 border-right:7px solid #ccc;
 margin-top: -1px;
}
.message-me .text:after, .message-me .text:before {
 left: 100%;
 top: 2em;
}
.message-me .text:after {
 border:6px solid transparent;
 border-left:6px solid #fff;
}
.message-me .text:before {
 border:7px solid transparent;
 border-left:7px solid #ccc;
 margin-top: -1px;
}
.message-you .text {
 margin-left:4em;
 border-left:1px solid #ccc;
}
.message-me .text {
 margin-right:3.4em;
 border-right:1px solid #ccc;
}
/* D
----------------------------------------------------------------------------------------------------*/
.message {
 padding:.8em .8em 0;
 background:#fff;
}
.message-box {
 margin-bottom:.8em;
}
.message-you .image {
 float:left;
 max-width: 3em;
 margin:0 .5em 0 0;
}
.message-me .image {
 float:right;
 max-width: 2.4em;
 margin:0 0 0 .5em;
}
.message-box .image img {
 margin-top:1em;
 border-radius: 2px;
}
.message-box .text {
 position: relative;
 padding:.5em .7em;
 border-radius:15px;
 background: #fff;
 line-height:1.4;
 font-size:14px;
 color:#666;
}
.message-you .text {
 margin-left:4em;
 background:#F1F0F0;
}
.message-me .text {
 margin-right:3.4em;
 background:#3498DB;
 color:rgba(255,255,255,.8);
}
.message-box .text:after {
 position: absolute;
 content: " ";
 height: 0;
 width: 0;
}
.message-you .text:after {
 right: 100%;
 top: 2.2em;
}
.message-you .text:after {
 border:6px solid transparent;
 border-right:6px solid #F1F0F0;
}
.message-me .text:after {
 left: 100%;
 top: 2em;
}
.message-me .text:after {
 border:6px solid transparent;
 border-left:6px solid #3498DB;
}
.message-me .text h3 {
 color:#fff;
}
.message-me .text time {
 color:rgba(255,255,255,.5);
}

CSS対応状況

• CSS Generated content
• CSS3 Border-radius
• CSS3 Box-sizing
• CSS3 Box-shadow
• CSS3 Transforms
• CSS min/max-width/height
• CSS3 Colors