css3对话框设计

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

css3对话框设计

对话框气泡,总能在一些设计中给人一种清晰的感觉,在这里我们用css3技术来设计了几种对话框。

在第一个案例中,主要使用:before&:after创建两个三角形,一个和背景色一样,一个和边框色一样;在第二个案例中主要使用:before和rotate,利用旋转来达到我们需要的效果;第三个是一个倾斜的三角其实也有两种方法一个就是两个三角形叠加一个就是demo中的旋转了;第四种比较复杂,一两句说不完,还是自己看吧

demodownload

css主要代码如下:

/* 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;   
}

demodownload

nike air max 1 trainers

如需转载,烦请注明出处:https://www.w3cplus.com/demo/381.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部