css3闪光对话框,CSS3 气泡状聊天对话框

CSS

语言：

CSSSCSS

确定

* {

padding: 0;

margin: 0;

border: 0;

color: #888;

font-family: "Source Sans Pro", sans-serif;

font-size: 20px;

font-weight: 300;

outline: none;

-webkit-text-size-adjust: none;

-ms-text-size-adjust: none;

-moz-text-size-adjust: none;

-o-text-size-adjust: none;

text-size-adjust: none;

-webkit-box-sizing: border-box;

-ms-box-sizing: border-box;

-moz-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box;

}

.padding {

padding: 20px;

}

.clearfix {

display: table;

overflow: hidden;

}

.clearfix:before {

content: " ";

display: block;

}

.font-size-small {

font-size: 0.65em;

}

.chat-wrapper {

margin: auto;

min-width: 400px;

width: 100%;

display: table;

overflow: hidden;

}

.chat-wrapper:before {

content: " ";

display: block;

}

.chat-wrapper .chat-content {

background-color: #fff;

}

.chat-wrapper .chat-image {

overflow: hidden;

float: left;

-webkit-border-radius: 50%;

-ms-border-radius: 50%;

-moz-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

}

.chat-wrapper .chat-image.chat-image-default {

width: 60px;

height: 60px;

}

.chat-wrapper .chat-message {

margin-bottom: 20px;

width: 100%;

display: table;

overflow: hidden;

}

.chat-wrapper .chat-message:before {

content: " ";

display: block;

}

.chat-wrapper .chat-message:last-of-type {

margin-bottom: 0;

}

.chat-wrapper .chat-message .chat-message-wrapper {

max-width: 70%;

display: table;

margin: 0 20px;

padding-top: 10px;

position: relative;

}

.chat-wrapper .chat-message .chat-message-wrapper:before {

content: " ";

display: block;

width: 0;

height: 0;

border: 12px solid transparent;

top: 20px;

position: absolute;

z-index: 2;

}

.chat-wrapper .chat-message .chat-message-wrapper p {

padding: 10px 20px;

color: #fff;

border-top: 1px solid;

}

.chat-wrapper .chat-message .chat-message-wrapper p:first-of-type {

border-top: 0 !important;

}

.chat-wrapper .chat-message.chat-message-receiver .chat-message-wrapper {

float: left;

}

.chat-wrapper .chat-message.chat-message-receiver .chat-message-wrapper:before {

left: -20px;

border-right-color: #91d98a;

}

.chat-wrapper .chat-message.chat-message-receiver p {

background-color: #91d98a;

border-top-color: #7dc576;

}

.chat-wrapper .chat-message.chat-message-receiver .chat-message-wrapper {

float: left;

}

.chat-wrapper .chat-message.chat-message-receiver .chat-message-content {

float: left;

}

.chat-wrapper .chat-message.chat-message-sender .chat-message-wrapper {

float: right;

}

.chat-wrapper .chat-message.chat-message-sender .chat-message-wrapper:before {

right: -20px;

border-left-color: #8ac0d9;

}

.chat-wrapper .chat-message.chat-message-sender .chat-message-content {

float: right;

}

.chat-wrapper .chat-message.chat-message-sender p {

background: #8ac0d9;

border-top-color: #76acc5;

}

.chat-wrapper .chat-message.chat-message-sender img {

float: right;

}

.chat-wrapper .chat-details {

clear: both;

width: 100%;

display: table;

overflow: hidden;

}

.chat-wrapper .chat-details:before {

content: " ";

display: block;

}

.chat-wrapper .chat-details span {

margin-right: 4px;

color: #bbb;

}

.chat-wrapper .chat-message-content {

display: table;

overflow: hidden;

-webkit-border-radius: 4px;

-ms-border-radius: 4px;

-moz-border-radius: 4px;

-o-border-radius: 4px;

border-radius: 4px;

}

.chat-wrapper .chat-message-content:before {

content: " ";

display: block;

}