提示框的样式拟物的效果是从一个博客网站上学习到的 – 爱CSS

关闭边栏(ESC)打开边栏(ESC)

这二种提示框的效果挺好看的，记录一下吧，现在改用的是拟物化的效果，有点立体感，之前用的这种是扁平风格的。

有点立体感的提示框

.infobox, .successbox, .warningbox, .errorbox {
    display:block;
    font-size:16px;
    margin: 20px 0;
    padding:12px 20px;
    position:relative;
    line-height:1.9;
    border-radius: 10px;
    color: #fff;
}
.infobox:before, .successbox:before, .warningbox:before, .errorbox:before {
    font-family:'FontAwesome';
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	position: absolute;
	width: 24px;
	height: 24px;
	line-height: 24.5px;
	left: -12px;
	top: -12px;
	-webkit-box-shadow: 0 0 0 2.5px #fff;
	text-align: center;
}
.infobox {
    background:linear-gradient(90deg,#20a0ff,#20b8ff);
    box-shadow: 0 3px 5px rgba(32,160,255,.5);
    text-shadow: 0 -1px #20a0ff;
}
.successbox {
    background: linear-gradient(90deg,#61be33,#8fce44);
    text-shadow: 0 -1px #61be33;
    box-shadow: 0 3px 5px rgba(104,195,59,.5);
}
.warningbox {
    background:linear-gradient(90deg,#ff953f,#ffb449);
    box-shadow: 0 3px 5px rgba(255,154,73,.5);
    text-shadow: 0 -1px #ff953f;
}
.errorbox {
    background: linear-gradient(90deg,#ff4949,#ff7849);
    box-shadow: 0 3px 5px rgba(255,73,73,.5);
    text-shadow: 0 -1px #ff4949;
}
.infobox:before {
	background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
	background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
	background: linear-gradient(0deg,#0092ff,#20b8ff);
    content:'\f129';
    text-shadow: 0 -1px #20a0ff;
}
.successbox:before {
	background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
	background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
	background: linear-gradient(0deg,#52bb1d,#95d34b);
	content: "\f00c";
	text-shadow: 0 -1px #61be33;
}
.warningbox:before {
	background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
	background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
	background: linear-gradient(0deg,#ff8f35,#ffc149);
	content: "\f12a";
	text-shadow: 0 -1px #ff953f;
}
.errorbox:before {
	background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
	background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
	background: linear-gradient(0deg,#ff3838,#ff7849);
	content: "\f00d";
	text-shadow: 0 -1px #ff4949;
}

.infobox, .successbox, .warningbox, .errorbox {

display:block;

font-size:16px;

margin: 20px 0;

padding:12px 20px;

position:relative;

line-height:1.9;

border-radius: 10px;

color: #fff;

}

.infobox:before, .successbox:before, .warningbox:before, .errorbox:before {

font-family:'FontAwesome';

border-radius: 50%;

color: #fff;

font-size: 12px;

position: absolute;

width: 24px;

height: 24px;

line-height: 24.5px;

left: -12px;

top: -12px;

-webkit-box-shadow: 0 0 0 2.5px #fff;

text-align: center;

}

.infobox {

background:linear-gradient(90deg,#20a0ff,#20b8ff);

box-shadow: 0 3px 5px rgba(32,160,255,.5);

text-shadow: 0 -1px #20a0ff;

}

.successbox {

background: linear-gradient(90deg,#61be33,#8fce44);

text-shadow: 0 -1px #61be33;

box-shadow: 0 3px 5px rgba(104,195,59,.5);

}

.warningbox {

background:linear-gradient(90deg,#ff953f,#ffb449);

box-shadow: 0 3px 5px rgba(255,154,73,.5);

text-shadow: 0 -1px #ff953f;

}

.errorbox {

background: linear-gradient(90deg,#ff4949,#ff7849);

box-shadow: 0 3px 5px rgba(255,73,73,.5);

text-shadow: 0 -1px #ff4949;

}

.infobox:before {

background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));

background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);

background: linear-gradient(0deg,#0092ff,#20b8ff);

content:'\f129';

text-shadow: 0 -1px #20a0ff;

}

.successbox:before {

background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));

background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);

background: linear-gradient(0deg,#52bb1d,#95d34b);

content: "\f00c";

text-shadow: 0 -1px #61be33;

}

.warningbox:before {

background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));

background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);

background: linear-gradient(0deg,#ff8f35,#ffc149);

content: "\f12a";

text-shadow: 0 -1px #ff953f;

}

.errorbox:before {

background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));

background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);

background: linear-gradient(0deg,#ff3838,#ff7849);

content: "\f00d";

text-shadow: 0 -1px #ff4949;

}

扁平风格提示框

.infobox, .successbox, .warningbox, .errorbox {
    display:block;
    font-size:14px;
    margin:20px 0 8px 0;
    padding:12px 12px 12px 46px;
    position:relative;
    border-left-width:3px;
    border-left-style:solid;
    line-height:28px
}
.infobox:before, .successbox:before, .warningbox:before, .errorbox:before {
    font-family:'FontAwesome';
    display:block;
    width:32px;
    height:32px;
    position:absolute;
    left:14px;
    top:calc(50% - 16px);
    font-size:24px;
    color:#999;
    line-height:32px
}
.infobox {
    background-color:#effaff;
    border-color:#6dcff6;
    color:#6dcff6
}
.successbox {
    background-color:#e7f6f0;
    border-color:#2fba87;
    color:#2fba87
}
.warningbox {
    background-color:#fffbf0;
    border-color:#ffc11b;
    color:#ffc11b
}
.errorbox {
    background-color:#fff0ec;
    border-color:#eb5020;
    color:#eb5020
}
.infobox:before {
    content:'\f05a';
    color:#6dcff6
}
.successbox:before {
    content:'\f058';
    color:#2fba87
}
.warningbox:before {
    content:'\f06a';
    color:#ffc11b
}
.errorbox:before {
    content:'\f057';
    color:#eb5020
}

.infobox, .successbox, .warningbox, .errorbox {

display:block;

font-size:14px;

margin:20px 0 8px 0;

padding:12px 12px 12px 46px;

position:relative;

border-left-width:3px;

border-left-style:solid;

line-height:28px

}

.infobox:before, .successbox:before, .warningbox:before, .errorbox:before {

font-family:'FontAwesome';

display:block;

width:32px;

height:32px;

position:absolute;

left:14px;

top:calc(50% - 16px);

font-size:24px;

color:#999;

line-height:32px

}

.infobox {

background-color:#effaff;

border-color:#6dcff6;

color:#6dcff6

}

.successbox {

background-color:#e7f6f0;

border-color:#2fba87;

color:#2fba87

}

.warningbox {

background-color:#fffbf0;

border-color:#ffc11b;

color:#ffc11b

}

.errorbox {

background-color:#fff0ec;

border-color:#eb5020;

color:#eb5020

}

.infobox:before {

content:'\f05a';

color:#6dcff6

}

.successbox:before {

content:'\f058';

color:#2fba87

}

.warningbox:before {

content:'\f06a';

color:#ffc11b

}

.errorbox:before {

content:'\f057';

color:#eb5020

}

苹果手机IOS设备对meta定义的私有属性

CSS 2017-02-12 1

以下几个meta属性，对于IOS设备是有效的，方便把网站保存在桌面，再从桌面打开的时候，就能实现…

“关注我”侧边栏的一种过度动画效果

CSS 2017-05-27 4

如本站侧边栏关注我相关按钮的过渡动画，感觉还是挺好看的，分享如下：一、相关结构与CSS: […

CSS中一些容易漏掉了知识点

CSS 2017-02-22 3

1.设置背景background-clip为text，能做出用背景填充字体 background:linear-gradient(top,#ee…

css3 grayscale滤镜

CSS 2018-02-23 1

如本站相册类型的文章，下方显示的缩略图，用到的效果就是一个灰度的过渡 CSS样式如下：添…

display:table和display:table-cell的妙用

CSS 2018-08-04 1

在一些应用中，比如要使文本垂直居中，可以用绝对定位来弄，但有时在左右二栏的结构时，定位就…

复选框 | 自定义CSS美化后的复选框

CSS 2017-04-30 3

最近在为博客添加评论回复时发邮件，在发表评论时，可以由用户决定是否有回复时邮件通知，这个…

酒干倘卖无-苏芮

文章页里添加音乐播放器不再悲哀演示

苹果手机IOS设备对meta定义的私有属性

“关注我”侧边栏的一种过度动画效果

CSS中一些容易漏掉了知识点

css3 grayscale滤镜

display:table和display:table-cell的妙用

复选框 | 自定义CSS美化后的复选框

发表评论取消回复

SQL Server 常用近百条SQL语句（收藏版）

SQL高效查询两个表不同的数据

五岁生日 | 这一年跟表姐一块庆祝生日，可心的一天了

跨域 | 百度联想词二种方式来实现

$.ajax({})方法success，error，complete，beforeSend

【童心致敬•礼赞祖国】红红中国心浓浓爱国情

酒干倘卖无-苏芮

文章页里添加音乐播放器 不再悲哀演示

发表评论 取消回复

文章页里添加音乐播放器不再悲哀演示

发表评论取消回复