css - CSS3 Shape Proportions -
when creating shape within css3 1 below best way keeping in mind retain of style possible?
how using css3 gradients border-radius
property? i've made scratch, can have look
div { height: 200px; width: 200px; margin: 50px; border: 3px solid #b6801f; border-radius: 24px; background: #f7d060; background: -moz-linear-gradient(top, #f7d060 0%, #ed8328 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7d060), color-stop(100%,#ed8328)); background: -webkit-linear-gradient(top, #f7d060 0%,#ed8328 100%); background: -o-linear-gradient(top, #f7d060 0%,#ed8328 100%); background: -ms-linear-gradient(top, #f7d060 0%,#ed8328 100%); background: linear-gradient(to bottom, #f7d060 0%,#ed8328 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#f7d060', endcolorstr='#ed8328',gradienttype=0 ); box-shadow: 1px 2px 3px #313131; position: relative; } div span { position: absolute; top: 10px; width: 180px; left: 10px; height: 80px; background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#b3ffffff', endcolorstr='#33ffffff',gradienttype=0 ); display: block; border-radius: 18px; }
Comments
Post a Comment