css3怎么设置logo,纯CSS3实现的LOGO标志 ABN AMRO CSS3 logo
#abnamro .canvas {
background-color: #f2f2f2;
background: -moz-radial-gradient(50% 50%, circle, #ddd 50%, #f2f2f2 50%);
background: -ms-radial-gradient(50% 50%, circle, #ddd 50%, #f2f2f2 50%);
background: -o-radial-gradient(50% 50%, circle, #ddd 50%, #f2f2f2 50%);
background: -webkit-radial-gradient(50% 50%, circle, #ddd 50%, #f2f2f2 50%);
background: radial-gradient(50% 50%, circle, #ddd 50%, #f2f2f2 50%);
background-size: 4px 4px;
}
#abnamro .icon {
background: #007d78;
height: 125px;
left: 195px;
top: 62px;
width: 150px;
}
#abnamro .icon:after {
background: -moz-linear-gradient(45deg, #007d78 50%, #ff9300 50%);
background: -ms-linear-gradient(45deg, #007d78 50%, #ff9300 50%);
background: -o-linear-gradient(45deg, #007d78 50%, #ff9300 50%);
background: -webkit-linear-gradient(45deg, #007d78 50%, #ff9300 50%);
background: linear-gradient(45deg, #007d78 50%, #ff9300 50%);
content: "";
display: block;
height: 106px;
left: 22px;
position:absolute;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 72px;
width: 106px;
}
/* general styles */
.canvas {
display: block;
overflow: hidden;
position: relative;
top: 0px;
text-indent:-9999px;
z-index: 10;
}
.icon, .icon * {
display: block;
position: absolute;
}
.monitor,
.monitor .canvas {
height: 304px;
width:540px;
}
.monitor {
background: #000;
border:30px solid #000;
border-radius:20px;
float:left;
position:relative;
}
.monitor:before { /* shadow */
box-shadow: 0 360px 10px rgba(0,0,0,0.2);
border-radius:50%;
content: "#";
display: block;
height: 20px;
left: 30px;
position: absolute;
text-indent: -9999px;
width: 540px;
}
.monitor:after { /* shine */
background: -webkit-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%);
background: -moz-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%);
background: linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%);
border-radius:20px 20px 0 0;
height: 364px;
content: "#";
display: block;
position: absolute;
right: -30px;
text-indent: -9999px;
top:-30px;
width:600px;
z-index: 10;
}
footer {
font:14px/1.3 'Microsoft YaHei';
margin-top:150px;
color: #000;
font-size: 15px;
line-height: 1.6;
padding: 60px 20px 0;
text-align: center;
display: block;
}
footer a{
color:#000;
text-decoration:none;
}
footer a:hover{
text-decoration:underline;
}
demo by http://js.alixixi.com
總結
以上是生活随笔為你收集整理的css3怎么设置logo,纯CSS3实现的LOGO标志 ABN AMRO CSS3 logo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 贝塞尔曲线工具css,如何反转CSS中的
- 下一篇： css中改变边距会影响原大小,CSS：更