纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果


Posted in HTML / CSS onDecember 28, 2012

语音气泡是一种很流行的效果,在很多社交网站上可以看到评论使用这样的效果来实现,对于游客来说非常有吸引力,但我发现很多这样的效果都是依赖于HTML或JavaScript来实现的非常麻烦。本教程包含各种形式的使用CSS 2.1与CSS3创建的渐进增强气泡效果。纯CSS3打造,没有使用图像,没有JavaScript,它可以应用到您现有的HTML当中。

演示:纯CSS气泡
支持:Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.。
渐进增强与伪元素
简单的<div>Content</div>或 <p>Content</p>代码,您可以产生语音泡沫的效果,如:

纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果

添加一个子元素,例如<blockquote><p>Quote</p></blockquote>你甚至可以产生语音泡沫的效果,如:

纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果

纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果


你可以根据自己的需要在现有的例子基础上进行改造打造自己的元素代码。关键是使用 :before和:after伪元素产生基本形状。
通过应用CSS3属性,如border-radius属性和transform就可以产生更复杂的形状和方位。

示例代码
这是一个例子,如何创建一个基本的语音泡沫形状。进一步的示例,可以查看演示页和CSS文件,

复制代码
代码如下:

/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content:"";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
bottom:-15px;
left:50px;
width:0;
border-width:15px 15px 0;
border-style:solid;
border-color:#f3961c transparent;
}

逐步增强的注意事项
这个方法是渐进增强。我们看到的样式层:“简单的彩色框,,圆角矩形或圆形的渐变背景。这些浏览器的样式,他们是能够呈现的。
IE6和IE7不支持CSS2.1伪元素,将会忽略所有:before和:after声明。它们没有任何增强,但保留着基本的使用习惯。..

关于Firefox 3.0的警告
Firefox 3.0虽然支持CSS2.1伪元素但不支持其定位。

HTML / CSS 相关文章推荐
CSS3弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
css3模拟jq点击事件的实例代码
Jul 06 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 #HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 #HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 #HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 #HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 #HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 #HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 #HTML / CSS
You might like
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
微信小程序文章列表功能完整实例
2020/06/03 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Python几种常见算法汇总
2020/06/02 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
医学院护理专业应届生求职信
2013/11/12 职场文书
买卖协议书范本
2014/04/21 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
小班教师个人总结
2015/02/05 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android