用纯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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 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输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
php解析xml方法实例详解
2015/05/12 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
js中设置元素class的三种方法小结
2011/08/28 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
python__new__内置静态方法使用解析
2020/01/07 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
仓库组长岗位职责
2014/01/29 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
老员工辞职信范文
2015/05/12 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
python process模块的使用简介
2021/05/14 Python
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python