Color Wheels with only CSS3 and Primary Colors
div{background:transparent;} .cw_out{background:transparent;width:400px;height:400px;margin:10px auto;position:relative;} .cw_out div,#ex1,#ex2{height:150px;width:150px;-moz-border-radius:150px 0px 0 0;-webkit-border-top-left-radius:150px;position:absolute;display:inline-block;} .cw_out div{display:block;} #ex1,#ex2{position:relative;display:block;background:rgba(255,25,0,1);margin:2px auto;} #ex2{-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);top:-37px;}; .red1,{background:rgba(255,25,0,.5);} .blue1{background:rgba(0,50,255,.5);} .yellow1{background:rgba(255,255,0,.5);} strong.red1{background:#f00;} strong.blue1{background:#02f;} strong.yellow1{background:#fc0;} .red2{background:rgba(255,25,0,.5);} .blue2{background:rgba(0,65,255,.5);} .yellow2{background:rgba(255,255,0,.5);} .red3{background:rgba(255,25,0,.2);} .blue3{background:rgba(0,65,255,.2);} .yellow3{background:rgba(255,255,0,.2);} code{padding:3px;text-shadow:none;} #s1{position:absolute;display:block;height:1px;width:1px;background:transparent;} #s2{display:block;position:absolute;height:300px; width:300px; border:1px solid #741;border:0;top:47px;left:47px;z-index:10;-moz-border-radius:150px;-webkit-border-radius:150px;margin:0;background-image: -moz-radial-gradient(center 45deg, circle closest-side, #fff 0%, … Continue reading