转自:http://www.cnblogs.com/daxiong/articles/3158630.html
纯CSS气泡框实现方法探究
气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示:
拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片,然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便,可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。
首先我们来看一下border这个属性,当我们把一个div的border-color设为不同值的时候,可以看到四边都成了一个梯形。
1
|
# test{ width : 50px ; height : 50px ; border-width : 50px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;}
|
如果我们继续把这个div的width和height都设为0,可以看到四边都成了一个三角形。
1
|
# test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;}
|
在主流浏览器中检测一下,发现IE6中存在一个小问题,上下边能形成三角形,左右两边仍然还是梯形
通过实验发现当把div的font-size和line-height都设为0的时候,div的四边在IE6下都能形成完美的三角形:
1
|
#test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ; font-size : 0 ; line-height : 0 ;}
|
很显然我们只需要其中的一个三角形,那么只需要将其他三边的color设置为透明或者跟页面背景一样的颜色,就能模拟出一个三角来,推荐将其他三边颜色设置为透明,即color的值为transparent,如果其他三边颜色跟页面背景一样,虽然视觉上只能看到一个三角,但背景颜色一旦改变,其他三边颜色也要随之改变。
1
|
#test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;}
|
问题又来了,IE6下transparent无效!其他三边被设置成默认的黑色了。
但通过实验发现把border-style设置为dashed后,IE6下其他三边就能透明了!
1
|
#test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid dashed dashed ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;}
|
到这一步我们已经成功的模拟出了一个小三角,下一步我们把这个小三角同矩形框结合起来。先设置一个矩形框,然后把小三角定位到矩形框上。先来写出HTML结构:
1
2
3
4
|
< div class = "tag" >
< em ></ em >
CSS气泡框实现
</ div >
|
CSS样式:
1
2
|
.tag{ width : 300px ; height : 100px ; border : 5px solid #09F ; position : relative ;}
.tag em{ display : block ; border-width : 20px ; position : absolute ; bottom : -40px ; left : 100px ; border-style : solid dashed dashed ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;}
|
效果如下:
现在指示方向的三角形箭头是实心的,而我们想要的是镂空的效果,这里我们再叠加一个同气泡框背景颜色一样的小三角,然后把这个叠加的小三角移动一下位置就能达到了。
首先需要对HTML结构进行调整,如下:
1
2
3
4
5
|
< div class = "tag" >
< em ></ em >
< span ></ span >
CSS气泡框实现
</ div >
|
CSS样式修改为:
1
2
3
|
.tag{ width : 300px ; height : 100px ; border : 5px solid #09F ; position : relative ; background-color : #FFF ;}
.tag em{ display : block ; border-width : 20px ; position : absolute ; bottom : -40px ; left : 100px ; border-style : solid dashed dashed ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;}
.tag span{ display : block ; border-width : 20px ; position : absolute ; bottom : -33px ; left : 100px ; border-style : solid dashed dashed ; border-color : #FFF transparent transparent ; font-size : 0 ; line-height : 0 ;}
|
最终效果如下所示:
注意:叠加的小三角span的bottom值并不是border-width的值,两个小三角bottom的差值理论上应该是2(border-width)2的平方根
最后来把代码优化一下,以便在后期更容易维护,完整的HTML结构:
1
2
3
4
5
6
|
< div class = "tag" >
< div class = "arrow" >
< em ></ em >< span ></ span >
</ div >
CSS气泡框实现
</ div >
|
CSS样式修改为:
1
2
3
4
5
|
.tag{ width : 300px ; height : 100px ; border : 5px solid #09F ; position : relative ; background-color : #FFF ;}
.arrow{ position : absolute ; width : 40px ; height : 40px ; bottom : -40px ; left : 100px ; }
.arrow *{ display : block ; border-width : 20px ; position : absolute ; border-style : solid dashed dashed dashed ; font-size : 0 ; line-height : 0 ; }
.arrow em{ border-color : #09F transparent transparent ;}
.arrow span{ border-color : #FFF transparent transparent ; top : -7px ;}
|
举一反三:不规则三角箭头的气泡框又如何实现?
HTML结构同前面一样:
1
2
3
4
5
6
|
< div class = "tag" >
< div class = "arrow" >
< em ></ em >< span ></ span >
</ div >
CSS气泡框实现
</ div >
|
矩形框CSS样式稍微改动一下:
1
|
.tag{ width : 300px ; height : 100px ; position : relative ; background-color : #09F ;}
|
重新定位一下三角箭头:
1
|
.arrow{ position : absolute ; width : 70px ; height : 60px ; left : -70px ; bottom : 10px ;}
|
元素相邻的两边border-style值设为solid(显示),另两边设为transparent(不会显示)
1
|
.arrow *{ display : block ; position : absolute ; border-style : dashed solid solid dashed ; font-size : 0 ; line-height : 0 ; }
|
首先模拟一个直角三角形,把一个元素的相邻两边color设为相同的值,另外两边颜色设为透明,即可得到一个直角:
1
|
.arrow em{ border-color : transparent #09F #09F transparent ; border-width : 30px 35px ;}
|
把两个直角三角形重叠在一起就可以得到一个不规则三角形
1
|
.arrow span{ border-width : 20px 35px ; border-color : transparent #FFF #FFF transparent ; bottom : 0 ;}
|
至此,不规则三角箭头的气泡框效果已经实现。
除了通过设置元素的border来模拟小三角之外,还可以用特殊字符来模拟,用特殊字符模拟小三角同样需要用到定位和重叠覆盖,只不过不需要调整border属性了。
先来看一个菱形“◆” ,它在页面中的代码是“◆”,需要注意的是页面编码需要设置为utf-8,在网页中可以把◆当作文字处理,可以通过调整font-size来它的大小、通过color来设置它的颜色。
HTML结构依然用前面的,不同的是在em、span标签中加入了 ◆
1
2
3
4
5
6
|
< div class = "tag" >
< div class = "arrow" >
< em >◆</ em >< span >◆</ span >
</ div >
CSS气泡框实现
</ div >
|
先来设置最外层div的样式,得到一个矩形框:
1
|
.tag{ width : 300px ; height : 100px ; position : relative ; border : 5px solid #09F ;}
|
接着定位箭头最外层容器div,便于观察可以先设置一个背景色 :
1
|
.arrow{ position : absolute ; width : 40px ; height : 40px ; left : 100px ; bottom : -40px ; overflow : hidden ;}
|
再对◆设置样式:
1
|
.arrow *{ display : block ; position : absolute ; font-size : 40px ; line-height : 40px ; width : 40px ; font-family :SimSun; font-style : normal ; font-weight : normal ; text-align : center ; vertical-align : middle ;}
|
注意:为了◆主流浏览器中显示一致,需要清除浏览器的默认字体样式,特别注意这里字体的设置
再分别修改em、span标签的字体颜色,并对这两个标签定位:
1
2
|
.arrow em{ color : #09F ; top : -15px ;}
.arrow span{ color : #FFF ; top : -22px ;}
|
注意:该例子中em和span两个元素垂直方向相差约7px,原来同上面提到的一样,差值理论上应该是2(border-width)2的平方根
完整CSS样式:
1
2
3
4
5
|
.tag{ width : 300px ; height : 100px ; position : relative ; border : 5px solid #09F ;}
.arrow{ position : absolute ; width : 40px ; height : 40px ; left : 100px ; bottom : -40px ; overflow : hidden ;}
.arrow *{ display : block ; position : absolute ; font-size : 40px ; line-height : 40px ; width : 40px ; font-family :SimSun; font-style : normal ; font-weight : normal ; text-align : center ; vertical-align : middle ;}
.arrow em{ color : #09F ; top : -15px ;}
.arrow span{ color : #FFF ; top : -22px ;}
|
最终效果如下:
HTML特殊字符查询:http://ikwebdesigner.com/special-characters/
补充:以上方式实现小三角的过程中不可避免的增加了多余的标签,如果不要求所有浏览器中显示一致的话, 我们可以利用css3来实现这个小三角
HTML结构:
1
2
3
|
< div class = "tag" >
css3气泡框
</ div >
|
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.tag{ width : 300px ;
height : 100px ;
border : 5px solid #09F ;
position : relative ;
background-color : #FFF ;
} .tag:before,.tag:after{ content : "" ; display : block ;
border-width : 20px ;
position : absolute ; bottom : -40px ;
left : 100px ;
border-style : solid dashed dashed ;
border-color : #09F transparent transparent ;
font-size : 0 ;
line-height : 0 ;
} .tag:after{ bottom : -33px ;
border-color : #FFF transparent transparent ;
} |
效果同上。
相关推荐
仿Windows的气泡提示,基于CSS方法实现,可作为网页上的信息提示窗口。效果描述:鼠标放在图片上,立即显示带小缺口的浮动提示层,鼠标移开后提示消失。
聊天内容需要用到气泡修饰,纯CSS开发的气泡式提示框,我们都熟悉使用CSS来生成页面上丰富的样式
参考链接 纯CSS气泡效果 需要用到的知识点: 当div的宽度和高度都是0时,整个边框是由四个三角形组成的,每一边为一个三角形,利用这点,来做小尖角,比如如下: 把不需要的三边的边框的颜色设置为与背景相同,这样...
使用纯 CSS 实现超酷炫的粘性气泡效果.doc
纯CSS3创意气泡动画特效是一款基于css3 keyframes属性绘制的多个圆点气泡随机排列布局动画特效。
这是一款使用纯CSS3制作的背景透明的Speech Bubbles对话气泡特效。该对话气泡使用两张透明的png图片来作为背景,通过简单的CSS代码来将它们组合为一个对话气泡效果。
Bootstrap纯css3左右时间轴特效代码气泡垂直,Bootstrap纯css3左右时间轴特效代码气泡垂直(html)
这是一款使用纯CSS3制作的效果非常逼真的气球漂浮动画特效。这个气球飘动效果主要使用CSS3 animation来制作,通过控制不同气球的位移和旋转角度,来达到气球漂浮的效果。
这是一款使用纯CSS3制作的背景透明的Speech Bubbles对话气泡特效。该对话气泡使用两张透明的png图片来作为背景,通过简单的CSS代码来将它们组合为一个对话气泡效果。
分享一款非常酷的CSS3动画菜单,这款CSS3菜单有一个很漂亮的黑色气泡背景,菜单是银白色的,和黑色的背景交织在一起更加显得有3D立体的视觉效果。CSS3的运用让菜单有圆角的效果,鼠标滑过菜单时也会改变背景。
语音气泡是一种很流行的效果,在很多社交网站上可以看到评论使用这样的效果来实现,对于游客来说非常有吸引力;依赖于HTML或JavaScript来实现的非常麻烦;纯CSS3打造,没有使用图像,没有JavaScript,它可以应用到您...
CSS3制作鼠标悬停提示气泡内容菜单</title> <style type=”text/css”> body{ background:#D6D3C9; color:#383835; font-family:Arial, Arial, Helvetica, sans-serif; } #bubblemenu li { ...
纯CSS3悬停气泡按钮动画特效是一款鼠标悬停按钮气泡上升动画特效。
答案是可以的,而且就用纯CSS来来实现,当然在没出效果之前你有权去怀疑这件事情,但出了效果后,你必须坚定的认识:楼主是老实人,出家人是不打诳语的。其实呢这个方法是我以前收藏在另一个博客中的,现在为了能让...
准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标,本文两种实现方式: 使用或不使用 before 和 :after 伪元素,示例如下,有此需求的朋友可以参考下
先来看一下效果图: 简单粗暴上代码: html: <span class=bot></span> <span class=top></span> </div> less: .dialog-box { position: relative; span { width:0; height:0; font-size:0; overflow:...
经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊!
今天我们要给大家介绍一款很酷的水平滑杆插件,和之前分享的jQuery双向滑动杆 设置数值百分比和超可爱的纯CSS3滑动开关按钮类似,基本都是通过CSS3来美化浏览器默认的水平滑杆。今天分享的这款有一个特点,就是滑杆...