用纯css3和html制作泡沫对话框实现代码


Posted in HTML / CSS onMarch 21, 2013

现在,泡沫对话框是一种比较流行的趋势,一般都是用html和javascript,和或者图片来实现,今天用纯css3和html来实现一些基本的简单的泡沫对话框

html代码如下:

复制代码
代码如下:

<div class="content">
<h2>The basic bubble variants</h2>
<p class="triangle-isosceles">This only needs one HTML element.</p>
<p class="triangle-isosceles top">For example, <code><p>[text]</p></code>.</p>
<p class="triangle-isosceles left">But it could be any element you want.</p>
<p class="triangle-isosceles right">The entire appearance is created only with CSS.</p>
<p class="triangle-right">This only needs one HTML element.</p>
<p class="triangle-right top">For example, <code><p>[text]</p></code>.</p>
<p class="triangle-right left">But it could be any element you want.</p>
<p class="triangle-right right">The entire appearance is created only with CSS.</p>
</div>

css代码如下:
复制代码
代码如下:

body {
padding:0;
margin:0;
font:1em/1.4 Cambria, Georgia, sans-serif;
color:#333;
background:#fff;
}
a:link, a:visited {
border-bottom:1px solid #c55500;
text-decoration:none;
color:#c55500;
}
a:visited {
border-bottom:1px solid #730800;
color:#730800;
}
a:hover, a:focus, a:active {
border:0;
color:#fff;
background:#c55500;
}
a:visited:hover, a:visited:focus, a:visited:active {
color:#fff;
background:#730800;
}
h2 {
margin:0.5em 0 1.5em;
font-size:1.25em;
font-weight:normal;
font-style:italic;
text-align:center;
}
p {
margin:1em 0;
}
.content h2 {
margin:2em 0 0.75em;
font-size:2em;
font-weight:bold;
font-style:normal;
text-align:left;
}
.content {
width:500px;
padding:0 0 50px;
margin:0 auto;
position:relative;
z-index:1;
}
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
filter:progid:DXImageTransform.Microsoft.gradient(GradinetType=0, startColorstr="#f9d835", endColorstr="#f3961c");
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.triangle-isosceles.top {
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
background:-moz-linear-gradient(#f3961c, #f9d835);
background:-o-linear-gradient(#f3961c, #f9d835);
background:linear-gradient(#f3961c, #f9d835);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#f3961c", endColorstr="#f9d835");
}
.triangle-isosceles.left {
margin-left:50px;
background:#f3961c;
}
.triangle-isosceles.right {
margin-right:50px;
background:#f3961c;
}
.triangle-isosceles:after {
content:"";
position:absolute;
left:50px;
bottom:-15px;
border-width:15px 15px 0;
border-style:solid;
border-color:#f3961c transparent;
display:block;
width:0;
}
.triangle-isosceles.top:after {
top:-15px;
bottom:auto;
left:auto;
right:50px;
border-width:0 15px 15px;
border-color:#f3961c transparent;
}
.triangle-isosceles.left:after {
top:16px;
left:-50px;
bottom:auto;
border-width:10px 50px 10px 0;
border-color:transparent #f3961c;
}
.triangle-isosceles.right:after {
top:16px;
right:-50px;
bottom:auto;
border-width:10px 0 10px 50px;
border-color:transparent #f39a1c;
left:auto;
}
.triangle-right {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#fff;
background:#075698;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
background:-moz-linear-gradient(#2e88c4, #075698);
background:-o-linear-gradient(#2e88c4, #075698);
background:-ms-linear-gradient(#2e88c4, #075698);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#2e88c4", endColorstr="#075698");
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.triangle-right.top {
background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
background:-moz-linear-gradient(#075698, #2e88c4);
background:-o-linear-gradient(#075698, #2e88c4);
background:linear-gradient(#075698, #2e88c4);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#075698", endColorstr="#2e88c4");
}
.triangle-right.left {
margin-left:40px;
background:#075698;
}
.triangle-right.right {
margin-right:40px;
background:#075698;
}
.triangle-right:after {
content:"";
position:absolute;
bottom:-20px;
left:50px;
border-width:20px 0 0 20px;
border-style:solid;
border-color:#075698 transparent;
display:block;
width:0;
height:0;
}
.triangle-right.left:after {
top:16px;
left:-40px;
bottom:auto;
border-width:15px 40px 0 0;
border-color:transparent #075698;
}
.triangle-right.top:after {
top:-20px;
right:50px;
bottom:auto;
left:auto;
right:50px;
border-width:20px 20px 0 0;
border-color:transparent #075698;
}
.triangle-right.right:after {
top:16px;
right:-40px;
bottom:auto;
left:auto;
border-width:15px 0 0px 40px;
border-color:transparent #075698;
}

支持的浏览器有:Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

预览效果如下:

在firefox14.0中预览的效果:

用纯css3和html制作泡沫对话框实现代码

在chrome10.0中预览效果

用纯css3和html制作泡沫对话框实现代码

在ie9中预览效果:

用纯css3和html制作泡沫对话框实现代码

在ie8中预览的效果:

用纯css3和html制作泡沫对话框实现代码

HTML / CSS 相关文章推荐
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 #HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 #HTML / CSS
css3实现一款模仿iphone样式的注册表单
Mar 20 #HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 #HTML / CSS
css3.0 图形构成实例练习二
Mar 19 #HTML / CSS
css3.0 图形构成实例练习一
Mar 19 #HTML / CSS
基于css3实现漂亮便签样式
Mar 18 #HTML / CSS
You might like
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
5种Python单例模式的实现方式
2016/01/14 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
django正续或者倒序查库实例
2020/05/19 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
师范生实习自我鉴定
2013/11/01 职场文书
初级会计求职信范文
2014/02/15 职场文书
服务员岗位职责
2015/02/03 职场文书
讲座通知范文
2015/04/23 职场文书
身份证丢失证明
2015/06/19 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
Python django中如何使用restful框架
2021/06/23 Python
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python