M.J

M.J

CSS实现短信气泡对话框

今天一朋友问我,像微信这聊天模式,网页上可以实现不,然后正好手里事情不多,就研究了下,主要是小三角比较难做,就在网上找找资料,研究了下,出来了,嗯。兼容性,IE下,没有圆角。

上图:

bubble[1]

好了,废话不多说,上Demo:http://demo.webjyh.com/bubble/

下面为各位上代码:

CSS代码 以下代码中缺少清楚浮动样式:

.bubble { margin:0px auto; width:320px; }
.demo {
    margin-bottom:20px;
    padding-left:50px;
    position:relative;
}

.triangle {
    position:absolute;
    top:50%;
    margin-top:-8px;
    left:42px;
    display:block;
    width:0;
    height:0;
    overflow:hidden;
    line-height:0;
    font-size:0;
    border-bottom:8px solid #FFF;
    border-top:8px solid #FFF;
    border-left:none;
    border-right:8px solid #3079ED;
}

.demo .article {
    float:left;
    color:#FFF;
    display:inline-block;
    *display:inline; zoom:1;
    padding:5px 10px;
    border:1px solid #3079ED;
    background:#eee;
    border-radius:5px;
    background-color: #4D90FE;
    background-image:-webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));
    background-image:-webkit-linear-gradient(top,#4D90FE,#4787ED);
    background-image:-moz-linear-gradient(center top , #4D90FE, #4787ED);
    background-image:linear-gradient(top,#4D90FE,#4787ED);
}

.fr { padding-left:0px; padding-right:50px; }

.fr .triangle {
    left:auto;
    right:42px;
    border-bottom:8px solid #FFF;
    border-top:8px solid #FFF;
    border-right:none;
    border-left:8px solid #3079ED;
}

.fr .article {
    float:right;
}

HTML结构:

<div class="bubble">
        <div class="demo clearfix">
            <span class="triangle"></span>
            <div class="article">我发短信给你了我发短信给你了我发短信给你了我发短信给你了我发短信给你了我发短信给你了我发短信给你了我发短信给你了</div>
        </div>
        <div class="demo clearfix fr">
            <span class="triangle right"></span>
            <div class="article">我发短信给你了我发短信给你了我发短信给你了我发短信给你了</div>
        </div>
	<div class="demo clearfix">
            <span class="triangle right"></span>
            <div class="article">我发短信给你了我发短信给你了我发短信给你了我发短信给你了</div>
        </div>
        <div class="demo clearfix">
            <span class="triangle right"></span>
            <div class="article">我发短信给你了我发短信给你了我发短信给你了我发短信给你了</div>
        </div>
        <div class="demo clearfix fr">
            <span class="triangle"></span>
            <div class="article">我发短信给你了我发短信给你了我发短信给你了我发短信给你了</div>
    </div>
</div>

好了就这么多,,其实很简单的,,小三角上下也是可以的,,,我这就不写了,

评论回复

  1. 回复 诺尘

    很赞! 怎么给在气泡旁边加点信息呢,比如说头像图片什么的….
    我尝试加上img , 可惜并不理想,图片出现在右边。

  2. 回复 Case吧

    赞一个!话说M.J能不能考虑把这个js集成到主题里呢?主题实在太赞了!

  3. 回复 pudding

    代码copy下来发现不兼容

  4. 回复 shui

    昨晚搜索到这个css样式,现在开始研究 😎

    • 回复 M.J

      好像很神奇的样子!!!!

  5. 回复 土鳖

    主题不错,分享下吧 😈

    • 回复 M.J

      此主题暂不对外分享!

9 + 4 =

回到顶部