纯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开启硬件加速的使用和坑
Aug 21 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
php截取视频指定帧为图片
2016/05/16 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
python邮件发送smtplib使用详解
2020/06/16 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
pycharm运行scrapy过程图解
2019/11/22 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
感谢信格式范文
2015/01/22 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
基于Python实现股票收益率分析
2022/04/02 Python