纯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 相关文章推荐
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 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
我的论坛源代码(五)
2006/10/09 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
python hook监听事件详解
2018/10/25 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
企业面试题试卷附带答案
2015/12/20 面试题
创业计划书六个要素
2013/12/26 职场文书
2014学年自我鉴定
2014/02/23 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
涨价通知
2015/04/23 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
Python中with上下文管理协议的作用及用法
2022/03/18 Python