气泡文字php,CSS3 巧妙实现聊天气泡
传统的聊天气泡
什么又是传统的聊天气泡,直接上图
代码如下
实现方式大家早有耳闻,圆角矩形和三角形嘛,三角形原理就是 border 可以设置为透明,可以复制上例中的代码修改 border-color属性摸索三角形的实现。
想必大家都知道,这里不赘述,聊一聊其他实现方法。
这里的三角形部分可以使用正方形代替,实现同样效果,方法就是旋转小正方形使其一部分露在外面。代码如下.comment {
position: relative;
width: 150px;
height: 35px;
background: #f8ac09;
border-radius: 5px;
margin: 30px auto 0;
}
.comment:after {
content: '';
position:absolute;
top: 10px;
right: -4px;
width: 8px;
height: 8px;
transform: rotate(45deg);
background-color: #f8ac09;
}
缺点是小三角只能是直角三角形,当然也可以通过变换得到菱形再进行拼接,变换多了感觉没有第一种方式直接,浏览器兼容 transform(2D) 属性如下
总体还不错,几种方法都能放心使用,不存在大的兼容问题。
现实案例
这里的设计稿多了一个边框,直接上设计稿
?️ 想一想怎么处理,我们回顾上文
第一种方式本身就是 border 透明,怎么再给它设置 border 是个问题,暂且先不考虑。
第二种方式如果使用小正方形旋转,层级叠加是个问题,因为设计稿中的气泡背景为 rgba(247, 188, 10, 0.03) 先看下实现代码.comment {
width: 150px;
height: 35px;
position:relative;
margin: 30px auto 0;
background-color: rgba(247, 188, 10, 0.03);
border: 1px solid rgba(252, 185, 8, 0.35);
border-radius: 5px;
}
.comment:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
top: 10px;
right: -4px;
transform: rotate(45deg);
background-color: rgba(247, 188, 10, 0.03);
border: 1px solid rgba(252, 185, 8, 0.35);
}
效果如下
上面的思路有问题,因为小正方形与气泡的一部分会重合,半透明背景的部分总会出现问题,有人说了偷个懒总可以吧,把透明后的背景色吸取出来然后再进行叠加(因为大家注意到设计稿的整体背景是纯色)
按着这个思路去实现,那么问题又来了。具体两个问题如下。
1.如果小正方形叠加在上,那么小正方形左半部分的边框就会显示.comment {
width: 150px;
height: 35px;
position: relative;
margin: 30px auto 0;
background-color: #faf8f3;
border: 1px solid #fbe2a0;
border-radius: 5px;
}
.comment:after {
content: '';
width: 8px;
height: 8px;
position:absolute;
top: 10px;
right: -4px;
transform: rotate(45deg);
background-color: #faf8f3;
border: 1px solid #fbe2a0;
}
效果如下,比较之前的图片圆角矩形的右边确实遮住了,但小正方形左边的边框显示出来了
处理方式呢,可以这样。.comment:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
top: 10px;
right: -5px;
transform: rotate(45deg);
background-color: #faf8f3;
border: 1px #fbe2a0;
border-style: solid solid none none;
}
我们发现问题解决了。效果如下
设计稿是有 padding 的,亲测本案例中可行,但是本着认真的原则 padding-right 如果过小,会出现什么问题呢?
我们向 div 中加文字。Hello,orange.Welcome to FrontEnd World!
效果如下
我们发现字母 o 的右下角被小正方形左侧覆盖了,当然可以通过 z-index 属性 hack。
2.如果小正方形在圆角矩形下,那么圆角矩形的右边框就会完整显示,大家自行脑补,此方案不合理,不过多解释。
以上的方法缺点也都很明显,那怎么做才能更严谨,能根据需求的变化不大伤筋骨呢?
我们还用三角形的方案! what? 不是说三角形的方案不可行了嘛 ?
一个三角形是不可行那两个呢,我们有请 after 的兄弟 before 出场。项目的真实代码如下.reply {
position: relative;
margin: 0.672rem 0 0.096rem 0;
padding: 0.408rem 0.816rem;
border: 1px solid rgba(#fcb908, 0.35);
border-radius: 0.2rem;
background-color: rgba(#f7bc0a, 0.03);
&:after {
content: '';
width: 0px;
height: 0px;
border-color: transparent transparent #faf8f3 transparent ;
border-style: solid;
border-width: 6px;
position: absolute;
top: -11px;
border-radius: 3px;
left: 18px;
right: auto;
}
&:before {
content: '';
width: 0px;
height: 0px;
border-color: transparent transparent rgba(#fcb908, 0.35) transparent;
border-style: solid;
border-width: 7px;
position: absolute;
top: -14px;
border-radius: 3px;
left: 17px;
right: auto;
}
}
总结
实际问题解决的方法很多,就看大家怎么去思考,这个方案也不是最满意的方案,因为多了一个伪元素,主要还是设计思想的多样性,总之 css 很灵活。
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
气泡文字php,CSS3 巧妙实现聊天气泡相关推荐
- css制作聊天气泡android,CSS3巧妙实现聊天气泡
传统的聊天气泡 什么又是传统的聊天气泡,直接上图 代码如下 实现方式大家早有耳闻,圆角矩形和三角形嘛,三角形原理就是 border 可以设置为透明,可以复制上例中的代码修改 border-color属 ...
- java 气泡聊天消息_CSS3 巧妙实现聊天气泡
前一阵子敢玩的 Mobile 页改版完成了,就之前的页面风格更加扁平化,从暗色系为主背景转到亮色背景,去掉更多的阴影,给用户简约的体验风格,哈哈我不是设计师不过多评价啦.感兴趣的朋友可以直接去 ida ...
- swing 聊天气泡背景_Java Swing中的聊天气泡
swing 聊天气泡背景 本文将向您解释"如何在Java swing应用程序中绘制聊天气泡?" 聊天气泡与呼出或提示气泡相同. 今天,大多数聊天应用程序都以这种格式显示转换,因此本 ...
- qq气泡php接口,h5实现QQ聊天气泡的实例介绍
这篇文章主要介绍了HTML5实现QQ聊天气泡效果,用 HTML/CSS 做了个类似QQ的聊天气泡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 今天自己用 HTML/CSS 做了个类似QQ的聊天气 ...
- html气泡运动代码,CSS3 仿微信聊天小气泡实例代码
今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家 ...
- html 气泡动画效果,css3实现好看的气泡按钮动画特效
CSS3在我们网页设计中是最关键的一环,为什么这么说呢?我们在浏览别人的网站时,经常会看到特别好看的动画效果,比如一个按钮啊,一个图片啊,每次看到都能够让人有种赏心悦目的感觉,这就使网站更具有吸引力和 ...
- android 仿微信聊天气泡显示图片,实现仿照微信聊天气泡里显示图片效果的自定义View...
第一部分是自定义的气泡效果的View,代码如下 public class BitmapShapeView extends View { private Paint mPaint; private Pa ...
- android 聊天气泡背景图片,关于实现微信聊天气泡里显示图片
可以用Bitmap画刷填充Path来实现 /** * Created by Coder.Yan on 2015/5/21. */ @SuppressWarnings("deprecation ...
- android 聊天气泡_android聊天气泡在android中构建ios风格的聊天
android 聊天气泡 重点 (Top highlight) In this post, we'll explore how to do two things: 1) create live cha ...
最新文章
- mysql没有err文件_xampp中的mysql启动时无法产生err文件
- E0144“const char *“ 类型的值不能用于初始化 “char *“ 类型的实体
- odoo API装饰器one、model、multi的区别
- nvcc 已退出,返回代码为1
- 【Leetcode】62. 不同路径
- 四川大学计算机网络_四川大学20考研情况
- 假如 Go 能说话,听听 GMP 的心声
- C#中Array.Sort()方法分析
- 使用wrapper将java程序注册程windows服务后不生效
- windows mobile 编译(生成镜像)提速
- 99% 的同学写不出好代码,都是因为这个问题!
- 如何从GET参数获取值?
- bug-Both weights and assigned values must be a sequence of numbers when assigning to values of <clas
- PostgreSQL查询优化器详解之逻辑优化篇
- zoom 前台_鼠标hover元素scale/zoom中心点放大效果实例页面
- 2512 4.7K 5%贴片电阻识别方法
- 计算机连接拒绝无法连接失败,打印机拒绝访问,教您打印机拒绝访问无法连接怎么解决...
- 互联网下半场,苏宁“拼购村”如何打造现象级模式
- 2021-09-02牛客网每日10题--前端
- 效率系列(二) Win10常用快捷键