html中如何设计对话框,用纯css3和html制作泡沫对话框实现代码
现在,泡沫对话框是一种比较流行的趋势,一般都是用html和javascript,和或者图片来实现,今天用纯css3和html来实现一些基本的简单的泡沫对话框
html代码如下:
复制代码代码如下:
The basic bubble variants
This only needs one HTML element.
For example, <p>[text]</p>
.
But it could be any element you want.
The entire appearance is created only with CSS.
This only needs one HTML element.
For example, <p>[text]</p>
.
But it could be any element you want.
The entire appearance is created only with CSS.
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中预览的效果:
在chrome10.0中预览效果
在ie9中预览效果:
在ie8中预览的效果:
html中如何设计对话框,用纯css3和html制作泡沫对话框实现代码相关推荐
- 用纯css3和html制作一些泡沫对话框
现在,泡沫对话框是一种比较流行的趋势,一般都是用html和javascript,和或者图片来实现,今天用纯css3和html来实现一些基本的简单的泡沫对话框 html代码如下: <div cla ...
- 纯CSS3实现咖啡制作全过程动画特效
用纯CSS3实现的咖啡制作全过程动画特效,从把咖啡豆导入杯子,到把咖啡煮好,整个动画还比较流畅. http://yy123.ink/itResDetail/48
- html中轮播图中图片样式如何调,纯CSS3做轮播图基础样式设置
一,准备工作 轮播图的主要遇新是直朋能到分览思想: 1,让友,记基开前不接些前家我告对猿果水使钮控轮播的几张图片横向连成一片,默认是从上到下(如果图片像朋支不器几事为的时后级功发发来久都这样含制层是请 ...
- html中怎么做扇形菜单,纯CSS3实现扇形动画菜单(简化版)实例源码
之前的一篇文章介绍这种效果的实现,但实现代码太过繁琐,所以在这里分享以下简化版的实现方法,有需要的可以参考学习. 原文章请点击这里 简化版完整实例 CSS3扇形动画菜单 *{padding: 0; m ...
- 简洁纯CSS3横向水平时间轴js特效代码
下载地址 这是一款基于Bootstrap网格系统的响应式横向水平时间轴特效.该水平时间轴特效采用bootstrap网格进行布局,然后通过css代码来进行美化,效果简洁时尚.核心CSS3代码.main- ...
- 雪花飘html动画,用纯CSS3的animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜...
雪花飘落: //雪花飘落 .snowDown { animation: snowDown 3s linear infinite normal; -webkit-animation: snowDown ...
- 纯CSS3实现打火机火焰动画
HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...
- html漂亮的单选框,纯css3实现漂亮的单选按钮radio
单选按钮radio是表单常见的元素,但是默认的单选按钮radio样式呆板不好看,因此通常设计人员会自己设计一个单选按钮radio,本文介绍用纯css3实现漂亮的单选按钮radio. 纯css3实现漂亮 ...
- 图片展示html css代码,纯CSS3实现图片展示特效
Web浏览器端的特效越来越让人兴奋,通过CSS和JavaScript,各种意想不到的绚丽效果都能用简单的几句代码完成.本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可 ...
最新文章
- Koa实现下载excel
- 用户查看订单信息php,php – 以编程方式获取用户刚刚在Ubercart中完成的订单
- 预习一下计算机网络分类,计算机网络实验预习报告1
- golang count 单字符 字符串 统计函数
- Jdk1.6 JUC源码解析(13)-LinkedBlockingQueue
- python ttf svg path_SVG的path的使用
- 计算机英语四六级对调剂有影响吗,你知道四六级对于考研的影响程度吗?
- python远程主机强迫关闭了_Python 远程主机强迫关闭了一个现有的连接
- c查看变量类型_Python入门对象与变量
- 吴恩达新书AI实战圣经《Machine Learning Yearning》中英文版分享
- Hadoop群集设置
- resnext50_32x4d-inference
- java小游戏制作(maxfo)
- 超详细MySQL安装及基本使用教程
- SSH框架的详细介绍
- 《快速阅读术》优秀读后感范文4000字
- Java处理图片和视频文件——视频抽帧与图片压缩
- ONVIF系列——海康摄像头设置onvif协议开启
- C#文件和文件文件夹排序
- An Introduction to Pairing-Based Cryptography学习笔记
热门文章
- nmap地址段下的ip_安服福音——花式nmap扫描整理结果(文末重磅消息)
- django外调用url_Django url
- mysql count里面能加条件吗_select count(1) 和 count(*),哪个性能更好?
- php登录个性验证码,PHP七种不同的个性创意验证码例子
- VM虚拟机中 localhost login_UTM 2.0 虚拟机来了,解决上网和无声音问题
- POSIX信号量API函数
- 计算polygon面积和判断顺逆时针方向的方法
- 图像的旋转和尺度缩放在对数极坐标系下的研究
- HttpClient实现客户端与服务器的通信
- Linux 动态库和静态库