纯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实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
php的大小写敏感问题整理
2011/12/29 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
Javascript string 扩展库代码
2010/04/09 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
详解Python的Django框架中的通用视图
2015/05/04 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Python交互式图形编程的实现
2019/07/25 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
Django实现内容缓存实例方法
2020/06/30 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
servlet面试题
2012/08/20 面试题
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
Elasticsearch 索引操作和增删改查
2022/04/19 Python