气泡提示效果css.html,用纯CSS3绘制高端简约的气泡提示框
用纯css绘制一个简单的气泡提示框,对于长期关注课课家CSS3绘图教程的朋友来说是件轻而易举的事,但是程序员最不喜欢做的事情是重复造轮子,加上之前小编分享的几个气泡要么过于复杂,通用性不强,要么需要鼠标移上才显示,移植也不方便。所以今天小编来整理一份更纯粹的气泡提示框代码。
气泡提示由一个圆角矩形和一个三角形组成,其中三角形可以利用before或after伪元素来插入。那么,每个提示框在html里面都只需要一个元素了。
我们来看看基础的html代码:
可见每个气泡都只用了一个div元素,三角形箭头部分我们用before伪元素即可。
四个气泡的样式非常接近,不同的只是三角形的位置,为此我们可以定义公共的部分。但是这里没有共用的类名啊,那该怎么弄呢?
我们发现这4个类都以tip-bubble开头,而CSS提供了一个属性选择器,可以让我们进行模糊匹配。
要实现匹配开头等于固定内容的选择器,我们可以这样写。
[class^=tip-bubble]
其中^=代表匹配开头,具体内容为tip-bubble。
下面我们就来为这个选择器定义一些公共的样式。首先,三角形和圆角矩形从某种意义上说是重合的,因此内部元素(包括伪元素)要使用绝对定位。所以整个div要设置为相对定位,让内部元素的位置以div的左上角作为参考点。然后再设置圆角半径、背景颜色、边距、宽高、字体等公共样式。
[class^=tip-bubble]{
display:inline-block;
position:relative;
background-color:#202020;
width:120px;
padding:20px;
color:#CCC;
text-align:center;
font-size:14px;
font-family:微软雅黑;
border-radius:10px;
margin:50px;
}
运行效果如下图所示:
感觉少了点层次感,我们用CSS3的box-shadow属性给气泡加个投影看看。
当然了,提示框的立体感不宜太强,所以跟原始图形错开1个像素就足够了。
[class^=tip-bubble]{
/*其它样式代码省略*/
box-shadow:1px 1px 2px #202020;
-o-box-shadow:1px 1px 2px #202020;
-moz-box-shadow:1px 1px 2px #202020;
-webkit-border-shadow:1px 1px 2px #202020;
}
4行代码功能一致,不同前缀用于兼容不同的浏览器。
以第一行为例,1px 1px 2px #202020代表的是水平和垂直方向都错开1像素,大小为2像素的深灰色(#202020)阴影。4个属性用英文空格分隔,分别代表x方向偏移,y方向偏移,阴影大小和阴影颜色。
运行效果如下图所示:
现在层次感好多了,我们用before伪元素加入三角形箭头看看。
有关注本站《CSS3基本形状汇总》的朋友对三角形的绘制应该不陌生,方法是利用边框的转角实现,只要边框设置得足够粗,那么转角部分就足以让我们完成三角形的绘制了。
本案例不再详解三角形的实现原理,不过大家要是忘了的话,就可以重温下面的原理图。
4个气泡都是绘制三角形,不同的只是位置和角度的区别。所以绘制三角形的部分仍然可以作为公共样式定义到[class^=tip-bubble]的before伪元素中。然后,我们也该用绝对定位了。
[class^=tip-bubble]:before{
content:'';
position:absolute;
width:0;
height:0;
border:15px solid;
}
因为只用到边框,所以width和height都设置为0。
运行效果如下图所示:
伪元素把气泡提示给“挖空”了(实际上是文字颜色)。因为width和height都等于0,所以被挖空的部分实际上都是由边框构成的,结构如下图所示,不难发现它就是4个三角形。
现在我们要为气泡提示补上三角形。以左箭头为例,我们要取的是右边框,所以我们给右边框(border-right)设置跟气泡背景一样的颜色。
这次我们就写在tip-bubble-left类上了。
.tip-bubble-left:before{
border-right-color:#202020;
}
运行效果如下图所示:
现在我们要把箭头移到提示框的左侧,但不难想象,如果背景颜色跟字体颜色不一致,那移到左边以后就一定会显示出一个被切掉一个角的小色块,所以我们应该先让before伪元素的字体颜色变成全透明。你可以使用CSS3的rgba颜色,但更地道的做法,是使用transparent。4个提示框都应该应用该效果,所以这次我们写回到公共的部分。
[class^=tip-bubble]:before{
/*其它样式代码省略*/
color:transparent;
}
运行效果如下图所示:
这下真的只剩下一个三角形了,另外3个边框已经不可见。
我们把箭头移到左侧,这时候用绝对定位将会很方便。只要让left等于伪元素宽度的相反数就可以了。
伪元素的宽度等于左边框粗细+右边框粗细,即30像素。
.tip-bubble-left:before{
border-right-color:#202020;
left:-30px;
}
运行效果如下图所示:
现在我们要让箭头垂直居中,但是气泡的高度会随着文本高度的变化而改变。所以我们改用百分比看看,居中自然就是50%了。
.tip-bubble-left:before{
/*其它样式代码省略*/
top:50%;
}
运行效果如下图所示:
还是没有居中啊。对的,因为定位的参考点是左上角,所以现在是三角形的上顶点对齐到气泡的中心。所以正确的做法是50%-15px(伪元素宽度的一半)。然而CSS3不支持这种写法,但用javaScript来实现又有点杀鸡用牛刀的感觉,所以我们不妨用其它可以控制位置的属性来处理,比如CSS3的transform,或者早期CSS就支持的margin-top。这里我们使用后者。
.tip-bubble-left:before{
/*其它样式代码省略*/
margin-top:-15px;
}
运行效果如下图所示,这回真的居中对齐了:
其它三个方向的实现思路跟左箭头一样,小编就不再重复了,只给出最后的代码。
.tip-bubble-top:before{
border-bottom-color:#202020;
left:50%;
top:-30px;
margin-left:-15px;
}
.tip-bubble-right:before{
border-left-color:#202020;
right:-30px;
top:50%;
margin-top:-15px;
}
.tip-bubble-bottom:before{
border-top-color:#202020;
bottom:-30px;
left:50%;
margin-left:-15px;
}
现在让我们一起来来看下最终的成果吧!
气泡提示框是软件,网页等产品使用频率非常高的元素,高端黑更是目前技术类软件的主流色调,所以本教程的实用价值相当高。HTML元素非常简洁,而CSS代码也完全没有掺杂任何跟提示框无关的样式,移植起来非常方便。另一方面,本文对制作过程每一步的讲解都相当细致,涉及的知识点也不复杂,因此本教程除了为实战的朋友带来便利以外,也非常适合初学者作为实例教程进行学习。
气泡提示效果css.html,用纯CSS3绘制高端简约的气泡提示框相关推荐
- html css 画五角星,纯 CSS3 绘制图形(心形、五角星、六边形等)
这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等.我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象 ...
- 页面展开收起php代码,纯CSS3实现移动端展开和收起效果的示例代码
本文介绍了纯CSS3实现移动端展开和收起效果的示例代码,分享给大家,具体如下: 展示效果: HTML代码 展开 收起 唧唧复唧唧,木兰当户织.不闻机杼声,惟闻女叹息.(惟闻 通:唯)问女何所思,问女何 ...
- 用纯CSS3绘制萌系漫画人物动态头像
大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测 ...
- html流光效果图,利用纯CSS3绘制html网页流光文字
对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代.00后的请退避.你们卟懂绯紸流!因为你们毕竟是杀马特贵族!!比我们高贵. 还记得那些炫酷的签名档,或者那些炫酷的动态头像.当年可是卖到十几块钱 ...
- css3控制html中图片,精选4款用纯CSS3绘制的有趣图形
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢 今天我们要分享一个利用纯C ...
- 纯CSS3绘制的猫咪老师——献给喜欢CSS3及《夏目友人帐》的你
2019独角兽企业重金招聘Python工程师标准>>> 最近正发愁着毕业设计做些什么,而后闲逛时看到了诸如twitter小鸟.哆啦A梦.灰太狼等纯CSS3实现的图像.于是本着初学的心 ...
- html css制作404页面,CSS3绘制404页面
标题有点噱了... 最近在做一个交通有关的项目, 想做一个类似标志牌的404, 所以就有了这个. 只用的CSS3中的旋转, 效果如下 上代码: Error .circle { width: 200px ...
- 用纯css3绘制的能自适应屏幕宽度的哆啦a梦动画
本人是学生,正在想深入学习html5和css3,所以最近在研究用css3绘制矢量图,于是就用纯css3基于百分比方案绘制了能自适应浏览器宽度而自动变化比例的哆啦a梦动画, 动画的宽高比例为:" ...
- html5 css3画八卦图,用纯CSS3绘制乾坤八卦图
乾坤八卦图衍生自中国古代的<河图>与<洛书>,伏羲根据燧人氏造设的这两幅星图所作.其形状经过抽象以后,成为对称感相当强的几何图形,无论是黑白两色还是形状,都非常地平衡和稳重. ...
最新文章
- VALSE 青年学者 | 心中的象牙塔:怎样才能拿到理想的教职offer?
- iOS设计模式 - 备忘录
- fabric 简单理解
- mysql从库追主库日志_Mysql主库跑太快,从库追不上怎么做?
- html5设计图的状态栏标准高度,HTML5 canvas自适应手机屏幕宽高度大小
- 我们为什么必须会git和maven
- 实验六JDBC数据库操作_JAVA
- ​Mysql数据读写分离(多实例配置)
- 【阿里云课程】1小时快速掌握Tensorflow核心功能,完成完整的项目实践
- coursera 《现代操作系统》 -- 第十周 文件系统(2)
- 怎么在MyEclipse中快速配置spring框架-非web项目
- Unity之3D数学基础
- 基于FPGA的人脸识别
- android webview 清空内容,Android WebView清空缓存
- PlaySound error
- 生物化学《第一章概述》
- 我的世界服务器矿怎么无限刷,我的世界中可以无限刷矿的指令是什么quest; | 手游网游页游攻略大全...
- HTML导出PDF有边框,使用jspdf导出的pdf的页面边框
- 【Selenium】切换/窗口切换
- WPS和Word段落文字5种对齐方式的功能、区别和用法详细解析