纯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画个同心圆示例代码
Jul 03 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 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中文字符串截取函数
2013/11/12 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
Angularjs单选框相关的示例代码
2017/08/17 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
分享Python字符串关键点
2015/12/13 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Python生成器常见问题及解决方案
2020/03/21 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
采购主管工作职责
2013/12/12 职场文书
银行员工职业规划范文
2014/01/21 职场文书
公司授权委托书范本
2014/04/03 职场文书
县委务虚会发言材料
2014/10/20 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
护士长2015年终工作总结
2015/04/24 职场文书