用纯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 相关文章推荐
css图标制作教程制作云图标
Jan 19 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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
VOLVO车载收音机
2021/03/02 无线电
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
浅析python中的分片与截断序列
2016/08/09 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
《长相思》听课反思
2014/04/10 职场文书
文明倡议书范文
2014/04/15 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
法人身份证明书
2014/10/08 职场文书
小学运动会开幕词
2015/01/28 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书