气泡状文本框,是一种很生动的网页设计手段。
它可以用来表示用户的发言。
也可以用来作为特定信息的提示符。
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的范例页。
(完)
小刚 说:
这个用来做导航应该也不错吧
2010年4月 3日 22:27 | # | 引用
sapjax 说:
呵呵 小圆点也可以用css3来做
定义一个div 设定背景颜色 假设宽高为30px
然后用-moz-border-radius:15px;-webkit-border-radius:15px;这样就得到了一个标准的圆,圆圈的话的 可以在里面再嵌套一个小div 同样的方法就可以了
2010年4月 4日 10:48 | # | 引用
诗沐 说:
哈哈 阮兄也不要着迷于这些纯效果的哦~还是要看应用场景
2010年4月 4日 13:33 | # | 引用
y 说:
始终认为,一个经济学博士在CSS上花了如此多的时间,实在是浪费~~~
2010年4月 4日 17:35 | # | 引用
dylanklc 说:
以前做圖片的邊角處理都是寫腳本調imagemagic來完成的.
看來以后嘗試用css來制作了
2010年4月 4日 18:11 | # | 引用
hbv_chinese 说:
css和js是我的硬伤.呵呵
div的那种遮罩呢?怎么做?
弹出登录框一样的玩意
2010年4月 5日 22:30 | # | 引用
龙崽 说:
这个挺好,顶一下!~
2010年4月 5日 23:09 | # | 引用
leopoincare 说:
效果真的很好,值得学习!
2010年4月 6日 10:34 | # | 引用
左手 说:
2010年4月 7日 10:57 | # | 引用
Chinatree 说:
-moz-border-radius:10px;
-webkit-border-radius:10px;
擦,moz和webkit两个内核,ie都不具备,可惜的是IE已经扎根了,除非你用linux系统等非微软系统,否则躲不过其手掌!
2010年9月18日 22:16 | # | 引用
Qun 说:
有局限性。FIREFOX这类浏览器才支持MOZ和WEBKIT
2010年9月27日 11:00 | # | 引用
iCyOMiK 说:
都是好文章吖,我看了你的CSS选择器笔记,又看了这个,都是很不错!!!!
2010年11月20日 11:57 | # | 引用
大飞狼 说:
2014年5月12日 10:44 | # | 引用
慢鸟 说:
好文章,学习了。
2016年3月 4日 22:04 | # | 引用
无名 说:
我认为也是浪费。
2016年3月17日 13:29 | # | 引用
路过的啊M 说:
看了你的评论,再看看文章发布时间,2010,浪不浪费不好说。
就觉得技术变化快,博主的做法现在可能已经不是最佳实践。
也觉得做个气泡效果也真是没那么简单。
2017年3月23日 16:25 | # | 引用
WanYi 说:
阮前辈,我是一个前端初学者,我很喜欢看您写的文章。您的文章就像是一本本历史书,见证了IT行业发展的轨迹,让我增长了不少见识。或许有些技术现在看来是落后了甚至被淘汰了但不管怎样,它在当时起到过作用,也被您记录了下来。您整理的笔记,让我看到了一个优秀的开发者应该具备怎样的品质。感谢有你!我会把您的博客从头到尾拜读完~~~=_=!
2017年12月13日 15:59 | # | 引用