CSS3 气泡状聊天对话框

CSS Chat Bubbles

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1754
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    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;
}

HTML

<div class='chat-wrapper'>
    <div class='chat-message padding'>
        <div class='chat-message chat-message-receiver'>
            <img class='chat-image chat-image-default' src='/assets/coolboy.jpg' />
            <div class='chat-message-wrapper'>
                <div class='chat-message-content'>
                    <p>Sushi tonight?</p>
                </div>
                <div class='chat-details'>
                    <span class='chat-message-localisation font-size-small'>My Address</span>
                    <span class='chat-message-read-status font-size-small'>- Read</span>
                </div>
            </div>
        </div>

<div class='chat-message chat-message-sender'>
            <img class='chat-image chat-image-default' src='/assets/coolgirl.jpg' />
            <div class='chat-message-wrapper'>
                <div class='chat-message-content'>
                    <p>Pizza?</p>
                    <p>We had sushi last time!</p>
                    <p>For me one Vegetariana! Plus some chili oil on it!</p>
                </div>
                <div class='chat-details'>
                    <span class='chat-message-localisation font-size-small'>My Address</span>
                    <span class='chat-message-read-status font-size-small'>- Read</span>
                </div>
            </div>
        </div>

<div class='chat-message chat-message-receiver'>
            <img class='chat-image chat-image-default' src='/assets/coolboy.jpg' />
            <div class='chat-message-wrapper'>
                <div class='chat-message-content'>
                    <p>Done. Delivery takes 20 minutes!</p>
                </div>
                <div class='chat-details'>
                    <span class='chat-message-localisation font-size-small'>My Address</span>
                    <span class='chat-message-read-status font-size-small'>- Read</span>
                </div>
            </div>
        </div>

<div class='chat-message chat-message-sender'>
            <img class='chat-image chat-image-default' src='/assets/coolgirl.jpg' />
            <div class='chat-message-wrapper'>
                <div class='chat-message-content'>
                    <p>Awesome! See you later! : )</p>
                </div>
                <div class='chat-details'>
                    <span class='chat-message-localisation font-size-small'>My Address</span>
                    <span class='chat-message-read-status font-size-small'>- Read</span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS Chat Bubbles

编辑器支持Emmet

快捷键

CSS Chat Bubbles

一款带气泡对话框的HTML5聊天应用界面模板

CSS3 带悬停信息提示框的水平时间线（紫红色调渐变背景）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：