css3实现气泡效果的聊天框
因为CSS3尚未形成标准,所以现行的浏览器对于css3支持不太一致,某些特性需要加上浏览器前缀
前缀 | 渲染引擎 | 使用该引擎的浏览器 |
-khtml- | KHTML | Konqueror |
-ms- | Trident | Internet Explorer |
-moz- | Mozilla | firefox |
-o-* | Presto | opera opera mobile |
-webkit- | WebKit | safari chrome android浏览器 |
没有添加css3样式之前原始页面如下:
1.第一步,实现圆角效果,在css之前实现圆角效果比较麻烦,但是css3中通过border-radius可以很容易实现圆角效果
- .radius{
- -webkit-border-radius:10px;
- -moz-border-radius:10px;
- <span> </span>border-radius:10px;
- }
添加之后效果如图,border-radius:x/y,如果x和y不相同,x表示横轴,y表示纵轴,如果x和y不相同,那么绘制的为椭圆形。
可以通过设置border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius分别设置边框四个角的弧度。
2.第二步,添加气泡的尾巴。
可以通过css来实现一个三角形充当气泡的尾巴,将容器的宽度以及高度设置为0,然后给盒容器设置一个较粗的边框,浏览器会在边框的交界处绘制结合线
- .triangle{
- height:0px;
- width:0px;
- border-width:20px;
- border-style:solid;
- border-color:green black blue red;
- }
绘制出的图形如下:
通过将另外三条边设置为透明的,即可得到一个三角形
- .triangle{
- height:0px;
- width:0px;
- border-width:20px;
- border-style:solid;
- border-color:green transparent transparent transparent;
- }
为了减少不必须要的html元素,我们通过伪属性来给对话框添加”尾巴“
- .left:before{
- position:absolute;
- content:"\00a0";
- width:0px;
- height:0px;
- border-width:8px 18px 8px 0;
- border-style:solid;
- border-color:transparent #A6DADC transparent transparent;
- top:15px;
- left:-18px;
- }
- .right:before{
- position:absolute;
- content:"\00a0";
- display:inline-block;
- width:0px;
- height:0px;
- border-width:8px 0px 8px 18px;
- border-style:solid;
- border-color:transparent transparent transparent #A6DADC;
- left:250px;
- top:15px;
- }
添加样式之后效果如图:
3.第三步,我们继续对输入框进行美化,通过hsla或者rgba实现半透明背景
目前输入框是通过十六进制来设置颜色
background-color:#A6DADC
还可以通过
background-color:rgb(166, 218,220)
background-color:rgba(166, 218,220,1)
background-color:hsl(182, 44%,76%)
background-color:rgba(182, 44%,76%,1)
在rgba模式中,前三个数字表示红,绿,蓝的值,取值范围为0~255,最后一个表示透明度
在hsla模式中,前三个数字分别表示色调(取值范围为0~360),饱和度(0%~100%),和亮度(0%~100%),最后一个参数表示透明度。
设置透明背景后效果图如下:可以看到背景花纹
接下来我们给聊天对话框设置一个背景渐变的效果,使背景框更加立体:
可以将linear-gradient,radial-gradient赋值给任何接受图片的属性
background-image:-moz-linear-gradient(hsla(0,0%,100%, 0.6), hsla(0, 0%, 100%, 0) 30px);
background-image:-webkie-gradient(linear, 0 0, 0 30, from(hsla(0, 0%, 100%, 0.6)), to(hsla(0, 0%, 100%, 0)));
效果图:
接下来我们给对话框添加阴影,使其有立体的效果:
box-shadow属性可以给盒容器添加阴影效果,我们需要设置阴影相对盒容器水平以及垂直方向上的偏移,阴影的颜色以及模糊半径和扩展半径
- -moz-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
- -webkit-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
- box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
效果图如下:对话框外围有一层阴影,看起来更加立体,第一个1px表示阴影相对盒容器右移1px,第二个1px表示将阴影相对盒容器下移1px,可以设置为负数像相反的方向偏移。2px表示模糊半径,该值越大越模糊,越小边缘越锐利。
继续给其添加特效,当鼠标移动到对话框的时候,改变对话框的位置以及阴影的大小,仿佛气泡弹出来一样
- .talk:hover{
- top:-2px;
- left:-2px;
- -moz-box-shadow:3px 3px 2px hsla(0, 0%, 0%, 0.3);
- -webkit-box-shadow:3px 3px 2px hsla(0, 0%, 0%, 0.3);
- box-shadow:3px 3px 2x hsla(0, 0%, 0%, 0.3);
- }
css3实现气泡效果的聊天框的更多相关文章
- CSS3实现气泡效果
首先定义一个 <p class="speech"></p> 先给外层的容器添加样式: p.speech { position: relative; widt ...
- CSS3圆角气泡框,评论对话框
<title>CSS3圆角气泡框,评论对话框</title> <style> body { ; ; font:1em/1.4 Cambria, Georgia, s ...
- 不用图片,纯Css3实现超酷的类似iphone的玻璃气泡效果
最近在一个私活做手机项目时候,需要实现一个类似ios 6中短信那样的气泡效果. 这里分享下实现心得,希望能给大家一点启发. 首先分析下iphone的气泡效果有一下特点 1. 四面圆角 2. 界面上向下 ...
- JQuery+CSS3实现封装弹出登录框效果
原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...
- HTML5实现微信聊天气泡效果
最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...
- 超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效
这是一款很有创意的HTML5 SVG聊天框拖拽弹性摇摆动画特效. 用户能够用鼠标点击或用手滑动聊天框上的指定区域,该区域会以很有弹性的弹簧效果拉开聊天用户列表.点击一个用户头像后.又以同样的弹性特效切 ...
- Android实现三角形气泡效果方式汇总
在开发过程中,我们可能会经常遇到这样的需求样式: 这张图是截取京东消息通知的弹出框,我们可以看到右上方有个三角形的气泡效果,这只是其中一种,三角形的方向还可以是上.下.左.右. 通过截图可以发现,气泡 ...
- 【转】关于FLASH中图文混排聊天框的小结
原文链接 图文混排也是FLASH里一个很古老的话题了,我们不像美国佬那样游戏里面聊天框就是聊天框,全是文字干干净净,也不像日本人发明了并且频繁地使用颜文字.不管是做论坛.做游戏,必定要实现的一点就是带 ...
- UWP开发之控件:用WebView做聊天框
目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...
随机推荐
- Spring写配置文件时不提示怎么办?
想要编写xml文件时代码提示,其实只要配置了相应的xsd文件即可,xsd文件也就是xml文件的一个约束.就是决定了你xml文件中可以写哪些东西. xsd文件是xml文件的元数据文件. 以bean标签为 ...
- PostgreSQL日志号LSN和wal日志文件简记
弄明白日志号的原理之后,一段时间又有点忘记了,干脆整理一遍: (一)wal文件命名规则 1)在$PGDATA目录下面的pg_xlog目录中存放着xlog日志文件(10.1之后变为了pg_wal): t ...
- Makefile特殊标签
http://www.gnu.org/software/make/manual/html_node/Special-Targets.html
- Hibernate中用left join(左外连接)查询映射中没有关联关系的两个表记录问题
一.问题背景 分账表split_summary结构如下: create table SPLIT_SUMMARY ( uuid VARCHAR2(32) not null, star_tdate VAR ...
- wampserver搭建本地服务器
打开..\wamp\bin\apache\apache2.4.9\conf\httpd.conf配置文件, <Directory "c:/wamp/www/"> # # ...
- js工具类的封装
common.js原生js实现的大多工具方法都将放在common文件中 布局rem.js,vue开发时,我们只需要将rem.js再main.js中import 引入即可 (function(win, ...
- cms与blog汇总
CMS ecms phpcms dedecms dilicms(CI框架) finecms Joomla dayucms DZ PHPwind Data地方门户网站 Blog wordpress ty ...
- 框架重构:测试中的DateTime.Now
存在的问题 DateTime.Now是C#语言中获取计算机的当前时间的代码: 但是,在对使用了DateTime.Now的方法进行测试时,由于计算机时间的实时性,期望值一直在变化.如:计算年龄. pub ...
- 使用dlopen和dlsym来使用C++中的类
http://my.oschina.net/u/1450061/blog/204608
- 对Json的各种遍历方法
慎用for in函数(有可能由于原型链的问题导致遍历问题): 如果要是用for in 一定要使用if (obj1.hasOwnProperty(key)) {}先做判断 解决方法 :1.eval() ...