制作CSS气泡框

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

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

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

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的范例页。

(完)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mukekeheart的iOS之旅

iOS学习——核心动画

  Core Animation(核心动画)是一组功能强大、效果华丽的动画API,无论在iOS系统或者在你开发的App中,都有大量应用。核心动画所在的位置如下图...

15740
来自专栏企鹅号快讯

D3.js 满足你对数据可视化的一切幻想

D3.js D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript...

64980
来自专栏生信宝典

一分钟绘制磷脂双分子层:AI零基础入门和基本图形绘制

Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的图片处理工具,简称AI。

1.8K30
来自专栏前端新视界

有趣的 CSS 像素艺术

原文:fun-times-css-pixel-art 译者:nzbin 友情提示:由于国内网络的原因,CodePen可能会打不开或者非常慢,请耐心等待! ...

23470
来自专栏拂晓风起

【Fanvas技术解密】HTML5 canvas实现脏区重绘

22720
来自专栏Android机器圈

Android之MaterialDesign应用技术2-仿支付宝上滑搜索框缓慢消失

PS:在这之前也就是上一篇介绍了MaterialDesign一些滑动删除、标题栏的悬浮效果等,如果没看过第一篇的小火鸡可以看一下,因为这篇是接着上一篇写的,有一...

416100
来自专栏hightopo

基于 HTML5 WebGL 的 3D 场景中的灯光效果

16320
来自专栏Sorrower的专栏

Android绘制(三):Path结合属性动画, 让图标动起来!

21220
来自专栏偏前端工程师的驿站

CSS魔法堂:再次认识font

一、前言                                 文字承载着站点内涵,而良好的字体、排版则为用户提供舒适的阅读体验。本文打算对字体稍微深...

322100
来自专栏WindCoder

一个创建产品动画说明视频的新手指南

英文原文:A Step-by-step Guide to Creating Animated Product Explainer Videos

22610

扫码关注云+社区

领取腾讯云代金券