css - CSS3 Shape Proportions -


when creating shape within css3 1 below best way keeping in mind retain of style possible?

enter image description here

how using css3 gradients border-radius property? i've made scratch, can have look

demo

   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

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

javascript - Clean way to programmatically use CSS transitions from JS? -

android - send complex objects as post php java -