纯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 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 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
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
php字符串截取的简单方法
2013/07/04 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
php中的ini配置原理详解
2014/10/14 PHP
浅谈php命令行用法
2015/02/04 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
vue组件实例解析
2017/01/10 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
怎样声明接口
2014/09/19 面试题
最新茶叶店创业计划书
2014/01/14 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
活动总结格式
2014/08/30 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
python源码剖析之PyObject详解
2021/05/18 Python