css制作对话框
2014-04-25 00:11
148 查看
当你发现好多图都能用css画出来的时候,你就会觉得css很有魅力了。//我是这么觉得的,先不考虑什么兼容问题
像漫画里出现的对话框,往往都是一个对话框然后就加入一个箭头指向说话的那一方,来表示这个内容是谁述说的。
今天认真学了一下:相关资料
首先,要知道一个对话框无非就是一个矩形和一个小三角的契合,想起小学时候教的七巧板;
所以简单来说,只要能制作出矩形和小三角即可;
矩形,一个普通块都可以算得上是矩形了,只要有足够的width和height;
那么三角形呢,这才是难点,起初完全没去研究过原来三角形可以是这么回事,在刚开始接触border的时候,只知道给块画个边框然后就知道了块的大小;
但是border的世界真的是博大精深,当给足了它颜色与宽度,它就有了改变世界的能力。
对于上图,实际的实现也是很简单
以上的css,两个类,一个就是实现上图的四种颜色,之所以会这样,颜色由border-color来去定义,而border-width则是边框宽度,针对top边框来说,border-width或者是border-top-width可以说就是最上面那个三角形的高,即直角顶点到水平边的垂直距离;//哎呀,我不想说的那么数学化- -
之所以会变成三角形,也就是因为实际的内容width和高度都变成0了,这个其实可以自行在chrome控制台边控制样式,边查看页面效果。
另外一个类主要区别在于border-color里取了transparent,这个值表示透明,效果自行演示咯。
既然能得到三角形,那么怎么让矩形跟三角形位置上的组合呢?这个就要看html的一个文档流和position概念了,其实我也不是很熟。
大概原理是让矩形具有position:relative的属性, 而让三角形归属与矩形块中,并且拥有position:absolute的属性,此后,三角形就可以通过top\right\left\bottom属性值的设置来移动三角形对于其父元素矩形的位置,从而达到完美契合。
效果图:
当时看到这个效果的时候,还没自己实现之前,就有一个疑问,那就是三角形的颜色问题,因为三角形就是一个border,一条边而不是一个块,不能拥有多种颜色,所以实际上一个border只是一个实心颜色的图形,那怎么办呢?
解决方案是复制多一个border三角形,当然颜色要不同,只要让其位置上重叠,底部着漏出一点边,从而达到有边效果的三角形(实际是重叠的两个三角形)。
关于位置移动问题,我觉得自己研究还是挺好玩的,不过就是没拿到诀窍的感觉,还是要自己去算一下。
像漫画里出现的对话框,往往都是一个对话框然后就加入一个箭头指向说话的那一方,来表示这个内容是谁述说的。
今天认真学了一下:相关资料
首先,要知道一个对话框无非就是一个矩形和一个小三角的契合,想起小学时候教的七巧板;
所以简单来说,只要能制作出矩形和小三角即可;
矩形,一个普通块都可以算得上是矩形了,只要有足够的width和height;
那么三角形呢,这才是难点,起初完全没去研究过原来三角形可以是这么回事,在刚开始接触border的时候,只知道给块画个边框然后就知道了块的大小;
但是border的世界真的是博大精深,当给足了它颜色与宽度,它就有了改变世界的能力。
对于上图,实际的实现也是很简单
.div-border{ width: 0px; height: 0px; border-top-color: #ccFF99; border-right-color: #ff0099; border-bottom-color: #00ff99; border-left-color: #9900ff; border-width: 50px; border-style: solid; } .div-trangle{ width: 0px; height: 0px; border-color: transparent #000; border-width: 50px; border-style: solid; }
以上的css,两个类,一个就是实现上图的四种颜色,之所以会这样,颜色由border-color来去定义,而border-width则是边框宽度,针对top边框来说,border-width或者是border-top-width可以说就是最上面那个三角形的高,即直角顶点到水平边的垂直距离;//哎呀,我不想说的那么数学化- -
之所以会变成三角形,也就是因为实际的内容width和高度都变成0了,这个其实可以自行在chrome控制台边控制样式,边查看页面效果。
另外一个类主要区别在于border-color里取了transparent,这个值表示透明,效果自行演示咯。
<body> <div style="height:200px;"> <div class="div-border"> </div> </div> <div style="height:200px;"> <div class="div-trangle"> </div> </div> </body>
既然能得到三角形,那么怎么让矩形跟三角形位置上的组合呢?这个就要看html的一个文档流和position概念了,其实我也不是很熟。
大概原理是让矩形具有position:relative的属性, 而让三角形归属与矩形块中,并且拥有position:absolute的属性,此后,三角形就可以通过top\right\left\bottom属性值的设置来移动三角形对于其父元素矩形的位置,从而达到完美契合。
<html> <head> <title>对话框</title> <style type="text/css"> *{ margin: 0; padding: 0; } .div-mid{ margin: 0 auto; width: 800px; height: 600px; } .div-diabox{ width: 200px; border-style: solid; border-width: 1px; border-radius: 10px; border-color: #CCCC33; background-color: #FFFF99; position: relative; margin: 0 auto; padding:30px; top: 30px; } .div-diabox .arrow-bottom-out{ width: 0px; height: 0px; border-style: solid; border-color: #CCCC33 transparent transparent transparent; border-width: 10px; position: absolute; top: 79px; left: 10px; } .div-diabox .arrow-bottom-in{ width: 0px; height: 0px; border-style: solid; border-color: #FFFF99 transparent transparent transparent; border-width: 10px; position: absolute; top: 78px; left: 10px; } .div-diabox .arrow-top-out{ width: 0px; height: 0px; border-style: solid; border-color: transparent transparent #CCCC33 transparent; border-width: 10px; position: absolute; top: -20px; right: 10px; } .div-diabox .arrow-top-in{ width: 0px; height: 0px; border-style: solid; border-color: transparent transparent #FFFF99 transparent; border-width: 10px; position: absolute; top: -19px; right: 10px; } .div-diabox .arrow-right-out{ width: 0px; height: 0px; border-style: solid; border-color: transparent transparent transparent #CCCC33; border-width: 10px; position: absolute; top: 10px; right: -20px; } .div-diabox .arrow-right-in{ width: 0px; height: 0px; border-style: solid; border-color: transparent transparent transparent #FFFF99; border-width: 10px; position: absolute; top: 10px; right: -19px; } .div-diabox .arrow-left-out{ width: 0px; height: 0px; border-style: solid; border-color: transparent #CCCC33 transparent transparent; border-width: 10px; position: absolute; top: 10px; left: -20px; } .div-diabox .arrow-left-in{ width: 0px; height: 0px; border-style: solid; border-color: transparent #FFFF99 transparent transparent; border-width: 10px; position: absolute; top: 10px; left: -19px; } </style> </head> <body> <div class="div-mid"> <div class="div-diabox"> <span class="arrow-bottom-out"></span> <span class="arrow-bottom-in"></span> 雷猴码 </div> <br/> <br /> <div class="div-diabox"> <span class="arrow-top-out"></span> <span class="arrow-top-in"></span> 雷猴码 </div> <br/> <br /> <div class="div-diabox"> <span class="arrow-right-out"></span> <span class="arrow-right-in"></span> 雷猴码 </div> <br/> <br /> <div class="div-diabox"> <span class="arrow-left-out"></span> <span class="arrow-left-in"></span> 雷猴码 </div> </div> </body> </html>
效果图:
当时看到这个效果的时候,还没自己实现之前,就有一个疑问,那就是三角形的颜色问题,因为三角形就是一个border,一条边而不是一个块,不能拥有多种颜色,所以实际上一个border只是一个实心颜色的图形,那怎么办呢?
解决方案是复制多一个border三角形,当然颜色要不同,只要让其位置上重叠,底部着漏出一点边,从而达到有边效果的三角形(实际是重叠的两个三角形)。
关于位置移动问题,我觉得自己研究还是挺好玩的,不过就是没拿到诀窍的感觉,还是要自己去算一下。
相关文章推荐
- CSS+javascript制作颜色对话框
- 纯css制作三角形+常用的对话框实例
- CSS使用菱形◆制作气泡对话框(兼容IE6 IE9)
- ASP.NET动态网站制作(4)--css(3)
- 纯CSS实现各类气球泡泡对话框效果
- 使用css制作三角,兼容IE6,用到的标签<div><s><span>
- 无javascript,纯CSS制作的网页下拉菜单
- 使用 CSS 绘制消息对话框
- 用CSS制作横向菜单
- 网页制作中的CSS+DIV:dl,dt,dd分别表示什么意思啊
- div+CSS网页制作
- 用css制作动态水平按钮菜单
- CSS遮罩层对话框
- CSS制作表格式按钮
- 纯CSS制作支持IE6、IE7、Firefox的下拉菜单
- CSS制作三层分离的导航条(教程实例)
- VC++改变对话框的背景色和VC++制作伸展自如、收缩随意的对话框
- CSS快速制作图片轮播的焦点
- 一款CSS+JS+DIV制作的蓝色风格tab滑动门
- DIV+CSS布局入门示例(三)页面顶部制作