用纯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 圆角效果
Jul 15 HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 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 无限级数据JSON格式及JS解析
2010/07/17 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
详解vue引入子组件方法
2019/02/12 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
js实现简单的秒表
2020/01/16 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
python多线程抽象编程模型详解
2019/03/20 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
户籍证明的格式
2014/01/13 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS
源码安装apache脚本部署过程详解
2022/09/23 Servers