campagne-adhesion-2015-www/stylesheets/3d-ribbon-examples.css

1 line
19 KiB
CSS
Raw Normal View History

2020-04-11 02:51:13 +02:00
#ribbon-example-1 div.ribbon-wrapper{height:60px;width:400px;position:relative;z-index:3;background:-webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #555), color-stop(100%, rgba(255,255,255,0))) 0 40px;background:-webkit-linear-gradient(#555 0px, rgba(255,255,255,0) 20px) 0 40px;background:-moz-linear-gradient(#555 0px, rgba(255,255,255,0) 20px) 0 40px;background:-o-linear-gradient(#555 0px, rgba(255,255,255,0) 20px) 0 40px;-pie-background:linear-gradient(#555555 0px,rgba(255,255,255,0) 20px) 0 40px;background:linear-gradient(#555555 0px,rgba(255,255,255,0) 20px) 0 40px}#ribbon-example-1 div.ribbon-front{width:460px;height:40px;background-color:#3a89ce;position:relative;z-index:2;-webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;-moz-box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;left:-30px}#ribbon-example-1 div.ribbon-edge-left-top,#ribbon-example-1 div.ribbon-edge-left-bottom{height:0;width:0;position:absolute;z-index:1;left:-30px;border-style:solid}#ribbon-example-1 div.ribbon-back-left{width:40px;height:40px;position:absolute;z-index:0;-webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;-moz-box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;background-color:#3a89ce;left:-40px}#ribbon-example-1 div.ribbon-edge-right-top,#ribbon-example-1 div.ribbon-edge-right-bottom{height:0;width:0;position:absolute;z-index:1;right:-30px;border-style:solid}#ribbon-example-1 div.ribbon-back-right{width:40px;height:40px;position:absolute;z-index:0;-webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;-moz-box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;background-color:#3a89ce;right:-40px}#ribbon-example-1 div.ribbon-edge-left-bottom{top:40px;border-width:0 30px 20px 0;border-color:transparent #163a59 transparent transparent}#ribbon-example-1 div.ribbon-back-left{top:20px}#ribbon-example-1 div.ribbon-edge-right-bottom{top:40px;border-width:20px 30px 0 0;border-color:#163a59 transparent transparent transparent}#ribbon-example-1 div.ribbon-back-right{top:20px}#ribbon-example-2 div.ribbon-wrapper{height:60px;width:450px;position:relative;z-index:3}#ribbon-example-2 div.ribbon-front{width:510px;height:40px;background-color:#3a89ce;position:relative;z-index:2;-webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;-moz-box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;left:-30px}#ribbon-example-2 div.ribbon-edge-left-top,#ribbon-example-2 div.ribbon-edge-left-bottom{height:0;width:0;position:absolute;z-index:1;left:-30px;border-style:solid}#ribbon-example-2 div.ribbon-back-left{width:40px;height:40px;position:absolute;z-index:0;-webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;-moz-box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;background-color:#3a89ce;left:-40px}#ribbon-example-2 div.ribbon-edge-right-top,#ribbon-example-2 div.ribbon-edge-right-bottom{height:0;width:0;position:absolute;z-index:1;right:-30px;border-style:solid}#ribbon-example-2 div.ribbon-back-right{width:40px;height:40px;position:absolute;z-index:0;-webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;-moz-box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;box-shadow:rgba(0,0,0,0.5) 0px 0px 4px;background-color:#3a89ce;right:-40px}#ribbon-example-2 div.ribbon-edge-left-top{bottom:60px;border-width:20px 30px 0 0;border-color:transparent #163a59 transparent transparent}#ribbon-example-2 div.ribbon-back-left{top:-20px}#ribbon-example-2 div.ribbon-edge-right-bottom{top:40px;border-width:20px 30px 0 0;border-color:#163a59 transparent transparent transparent}#ribbon-example-2 div.ribbon-back-right{top:20px}#ribbon-example-3 div.ribbon-wrapper{height:60px;width:550px;position:relative;z-index:3;background:-webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #555), color-stop(100%, rgba(255,255,255,0))) 0 40px;background:-webkit-linear-gradient(#555 0px, rgba(255,255,255,0) 20px) 0 40px;background:-moz-linear-gradient(#555 0px, rgba(255,255,255,0) 20px) 0 40px;background:-o-linear-gradient(#555 0px, rgba(255,255,255,0) 20px) 0 40px;-pie-background:linear-gradient(#55555