css3对话框设计
对话框气泡,总能在一些设计中给人一种清晰的感觉,在这里我们用css3技术来设计了几种对话框。
在第一个案例中,主要使用:before&:after创建两个三角形,一个和背景色一样,一个和边框色一样;在第二个案例中主要使用:before和rotate,利用旋转来达到我们需要的效果;第三个是一个倾斜的三角其实也有两种方法一个就是两个三角形叠加一个就是demo中的旋转了;第四种比较复杂,一两句说不完,还是自己看吧。
演示:http://www.w3cplus.com/demo/css3/css3bubbles/css3bubbles.html
下载:css3bubbles.zip
在第一个案例中,主要使用:before&:after创建两个三角形,一个和背景色一样,一个和边框色一样;在第二个案例中主要使用:before和rotate,利用旋转来达到我们需要的效果;第三个是一个倾斜的三角其实也有两种方法一个就是两个三角形叠加一个就是demo中的旋转了;第四种比较复杂,一两句说不完,还是自己看吧。
/* demo1 */
.demo1{
border:2px solid #ccc;
padding:10px;
margin-bottom:20px;
position:relative;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.demo1:before,.demo1:after{
content:'';
width:0;
height:0;
position:absolute;
}
.demo1:before{
left:10px;
bottom:-8px;
border-top:8px solid #ccc;
border-left:8px solid transparent;
border-right:8px solid transparent;
}
.demo1:after{
left:12px;
bottom:-6px;
border-top:8px solid #fff;
border-left:6px solid transparent;
border-right:6px solid transparent;
}
/* demo2 */
.demo2{
border:2px solid #29B4F0;
padding:10px;
position:relative;
margin-bottom:20px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.demo2:before{
content:'';
width:8px;
height:8px;
position:absolute;
left:20px;
bottom:-7px;
background-color:#fff;
border:2px solid #29B4F0;
border-width: 0 2px 2px 0;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
/* demo3 */
.demo3{
background-color:#B6F5FE;
padding:10px;
position:relative;
margin-bottom:20px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.demo3:before,.demo3:after{
content:'';
width:0;
height:0;
position:absolute;
}
.demo3:before{
left:10px;
bottom:-18px;
border-top:30px solid #B6F5FE;
border-left:8px solid transparent;
border-right:8px solid transparent;
-webkit-transform:rotate(50deg);
-moz-transform:rotate(50deg);
-ms-transform:rotate(50deg);
-o-transform:rotate(50deg);
transform:rotate(50deg);
}
/* demo4 */
.demo4{
background-color:#82AF11;
padding:10px;
color:#fff;
position:relative;
text-shadow:0 -1px 1px rgba(0,0,0,.2);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.demo4:before{
content:'';
width:100px;
height:20px;
background-color:#82AF11;
position:absolute;
bottom:-20px;
left:200px;
}
.demo4:after{
content:'';
width:50px;
height:20px;
background-color:#fff;
position:absolute;
bottom:-20px;
left:200px;
border-radius:0 20px 0 0;
}
.demo4 > :first-child:before{
content:'';
width:50px;
height:20px;
background-color:#fff;
position:absolute;
bottom:-20px;
left:250px;
border-radius:20px 0 0 0;
}
演示:http://www.w3cplus.com/demo/css3/css3bubbles/css3bubbles.html
下载:css3bubbles.zip
【css3对话框设计】相关文章
1. css3对话框设计
2. phonegap教程第二讲 Jquery Mobile页面与对话框
5. html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现 ... ...
本文来源:https://www.51html5.com/a927.html
上一篇:CSS3制作莲花开放
下一篇:CSS QUIZ: 带边 BORDER 的三角形
﹝css3对话框设计﹞相关内容
- 用CSS3设计响应式导航菜单
- 12个新潮的 HTML5 & CSS3 网站设计欣赏
- HTML5、CSS3与响应式Web设计入门
- cssSandpaper-兼容IE的CSS3 JavaScript库
- 14个最佳的HTML/CSS设计和开发框架
- 网站设计中使用CSS的注意事项
- 网站设计中使用CSS的注意事项
- 纯CSS实现的3D简洁按钮设计
- 每位设计师都应该拥有的50个CSS代码片段
- 15个最新CSS相关的网页设计及开发工具