气泡状文本框,是一种很生动的网页设计手段。

它可以用来表示用户的发言。

也可以用来作为特定信息的提示符。

DVD租借网站Netflix,还用它显示碟片的详细信息。

=========================

制作CSS气泡框的传统方法,需要5张背景图片,分别是:

  *  tl.gif,左上方的圆角。
  *  tr.gif,右上方的圆角。
  *  bl.gif,左下方的圆角。
  *  br.gif,右下方的圆角。
  *  angle.gif,突出的三角形。

现在假定有这样一段代码:

  <blockquote>床前明月光,疑是地上霜。</blockquote>

  <p>李白</p>

我们希望通过气泡框,产生一种视觉效果,将李白与诗句对应起来。

那么,首先需要为诗句添加四个"钩子"(handler):

  <div class="tl">
   <div class="tr">
    <div class="br">
     <div class="bl">
      <blockquote>床前明月光,疑是地上霜。</blockquote>
     </div>
    </div>
   </div>
  </div>

然后,为最外面的容器div.tl指定高度和宽度,使它形成一个视觉方框:

  .tl{
    width:300px;
    height:50px;
    text-align:center;
    line-height:50px;
  }

接着,为四个"钩子"依次添加四个不同的圆角背景:

  .tl{background:url('tl.gif') top left no-repeat #ff8c45;}
  .tr{background:url('tr.gif') top right no-repeat;}
  .bl{background:url('bl.gif') bottom left no-repeat;}
  .br{background:url('br.gif') bottom right no-repeat;}

最后,在"李白"前面加上三角形图片。

  p{
    padding: 15px 0px 0px 50px; 
    background: url('angle.gif') 40px top no-repeat;
  }

气泡框就生成了。

这种方法的优点是所有浏览器都支持,缺点是比较麻烦,必须制作专门的图片,增加多余的标签,代码的灵活性较小。

============================

随着CSS3的出现,现在有了更好的方法,不需要任何背景图片和多余的标签,就能生成漂亮的文本框。

请看新方法发明人Nicolas Gallagher制作的范例:

由于这种方法用到了CSS3,所以IE6不支持,IE7和IE8无法显示圆角效果。其他浏览器的最新版本,都能够正常显示。

还是以前面的代码为例。

  <blockquote class="bubble">床前明月光,疑是地上霜。</blockquote>

第一步,生成基本的方框。

  .bubble{
    position:relative;
    padding:15px;
    margin:1em 0em 3em;
    width:300px;
    line-height:1.2; 
    text-align:center;
    color:#fff;
    background:#075698;
  }

第二步,生成圆角。

  .bubble{
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
  }

第三步,制作线性渐变的效果。

  .bubble{
    background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(top, #f9d835, #f3961c);
    background:-o-linear-gradient(top, #f9d835, #f3961c);
    background:linear-gradient(top, #f9d835, #f3961c);
  }

第四步,在容器后面添加一个空元素,并将长度和宽度都设为0。

  .bubble:after {
    content:"\00a0";
    width:0;
    height:0;
  }

第五步,指定这个空元素为块级元素,并且四个边框之中,只显示上方的边框,其他三个边框,都设为透明。因为该元素的大小为0,所以它的每一个边框,都是一个等腰三角形。

  .bubble:after{
    display:block;
    border-style:solid;
    border-width:15px;
    border-color:#f3961c transparent transparent transparent;
  }

这时,已经可以看见这个三角形了(其实是一个上边框)。

第六步,指定空元素的定位方式为absolute。然后,以容器元素的左下角为基点,将空元素水平右移一定的距离(这里是50像素),再垂直下移两个边界的距离。(由于第五步将空元素的边界设为15像素,所以这里就是下移30像素。)

  .bubble:after{
    position:absolute;
    z-index:-1;
    bottom:-30px;
    left:50px; 
  }

至此,一个不需要任何背景图片和多余标签的气泡框,就出现在我们眼前了。

灵活处理空元素的边框,或者改变大小,或者生成圆角,或者将两个空元素的边框重叠,就会产生各种各样的变化。具体的效果和代码,请参考Nicolas Gallagher的范例页。

CSS气泡的更多相关文章

  1. 纯CSS气泡框实现方法探究

    气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...

  2. 辛星和您一起手写CSS气泡

    上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢 ...

  3. 纯CSS气泡效果

    http://www.liaoxuefeng.com/article/0013738937970388b6b6e5e5e2f4e21b65b01807c84ddf6000

  4. CSS气泡提示框 可自定义配置箭头

    在线演示 本地下载

  5. 纯CSS实现箭头、气泡让提示功能具有三角形图标(简单实例)

    <style type="text/css"> /*向上箭头,类似A,只有三个边,不能指定上边框*/ .arrow-up { width: 0px; height: 0 ...

  6. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  7. 一个CSS中Z-index的用法

    一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...

  8. CSS三角形的实现原理及运用

    原理 css盒模型 一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小 ...

  9. 10款精美的web前端源码的特效

    1.HTML5侧滑聊天面板 很酷的聊天界面 这是一款基于HTML5和SVG的侧滑聊天面板,初始化的时候聊天面板是锁定的,当你拖动白色区域时,即可解锁展开聊天面板,显示所有好友.点击面板中的好友即可切换 ...

随机推荐

  1. 自用 Pycharm 主题配色分享(主题才是开发第一生产力)

    写在前面的话 是的,我又回来了,上一篇[使用 Visual Studio Code(VSCode)搭建简单的 Python + Django 开发环境]才说真香,结果用两天就发现很多恶心的问题拦住了菜 ...

  2. appstore开发者 名称修改

    1.前提是开发者账号为企业账号 CSDN大佬写的,应该没错

  3. mysqldump备份以tmp_开头的表

    需要备份warehouse这个DB下所有以tmp_开头的表名.直接说结论: mysqldump .sql.gz 其中:-Bse是为了将查询中的-----------------等分隔符给屏蔽了. gz ...

  4. ajax的get,post ,封装

    let ajax = new Object(); ajax.get = function(url,fn){ //创建ajax对象 let xhr = new XMLHttpRequest(); //与 ...

  5. c++多线程基础3(mutex)

    整理自:zh.cppreference.com/w/cpp/thread 互斥锁 互斥算法避免多个线程同时访问共享资源.这会避免数据竞争,并提供线程间的同步支持.定义于头文件 <mutex> ...

  6. 洛谷P4207 [NOI2005]月下柠檬树(计算几何+自适应Simpson法)

    题面 传送门 题解 我还好奇自适应辛普森法干嘛用的呢--突然想起来积分的一个用处就是求曲边图形的面积-- 我们先来考虑一下这些投影是什么形状 一个圆的投影还是它自己 一个圆锥的投影是一个圆加上一个点, ...

  7. Java面向对象之接口interface 入门实例

    一.基础概念 (一)接口可以简单的理解为,是一个特殊的抽象类,该抽象类中的方法都是抽象的. 接口中的成员有两种:1.全局常量 2.抽象方法 定义接口用关键字interface,接口中的成员都用固定的修 ...

  8. Map/Reduce应用开发基础知识-摘录

    Map/Reduce 这部分文档为用户将会面临的Map/Reduce框架中的各个环节提供了适当的细节.这应该会帮助用户更细粒度地去实现.配置和调优作业.然而,请注意每个类/接口的javadoc文档提供 ...

  9. loj #2538. 「PKUWC2018」Slay the Spire

    $ \color{#0066ff}{ 题目描述 }$ 九条可怜在玩一个很好玩的策略游戏:Slay the Spire,一开始九条可怜的卡组里有 \(2n\) 张牌,每张牌上都写着一个数字\(w_i\) ...

  10. 静态库(.a)与动态库(.so)的简明介绍

    静态库(.a)与动态库(.so)的简明介绍 gcc有很多关于静态库,动态库的选项如-l,-L,-fPIC,-shared -Wl,-soname,看着很复杂容易混淆,其实静态库和动态库都是应需而生,只 ...