Crystal

Color Wheels with only CSS3 and Primary Colors

Posted on July 11, 2010 by Crys

Go Back To Page 1

Let’s End With the (Lengthy) Code

You can simply copy/paste this into your own html if you’d like to try messing around with it yourself 


<style type="text/css">
.cw_out{background:transparent;height:400px;
    margin:10px auto;position:relative;width:400px;}
.cw_out div{-moz-border-radius:150px 0 0 0;
    -webkit-border-top-left-radius:150px;display:inline-block;
    height:150px;position:absolute;width:150px;}
.cw_out div{display:block;}

.red1,.red2{background:rgba(255,25,0,1);}
.blue1,.blue2{background:rgba(0,50,255,1);}
.yellow1,.yellow2{background:rgba(255,255,0,1);}

.red3{background:rgba(255,25,0,.2);}
.blue3{background:rgba(0,65,255,.2);}
.yellow3{background:rgba(255,255,0,.2);}

#s1{background:transparent;display:block;
    height:1px;position:absolute;width:1px;}
#s3{border:2px solid #dca45a;display:block;position:absolute;
    height:298px;width:298px;z-index:7;top:48px;left:48px;
    -moz-border-radius:150px;-webkit-border-radius:150px;
    -moz-box-shadow:1px 1px 6px #dca45a;-webkit-box-shadow:1px 1px 6px #dca45a;}

#r1{z-index:3;top:71px;left:33px;
    -moz-transform: rotate(-15deg);-webkit-transform: rotate(-15deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9659258262890683, 
        M12=0.25881904510252074, M21=-0.25881904510252074, 
        M22=0.9659258262890683,sizingMethod='auto expand');
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', 
        M11=0.9659258262890683, M12=0.25881904510252074, 
        M21=-0.25881904510252074, M22=0.9659258262890683)";}

#r2{z-index:2;top:33px;left:71px;
    -moz-transform: rotate(15deg);-webkit-transform: rotate(15deg);
    filter:  progid:DXImageTransform.Microsoft.Matrix(M11=0.9659258262890683,
        M12=-0.25881904510252074, M21=0.25881904510252074, 
        M22=0.9659258262890683,sizingMethod='auto expand');
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', 
        M11=0.9659258262890683, M12=-0.25881904510252074,
        M21=0.25881904510252074, M22=0.9659258262890683)";}

#r3{z-index:1;top:19px;left:124px;
     -moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476,
        M12=-0.7071067811865475, M21=0.7071067811865475, 
        M22=0.7071067811865476,sizingMethod='auto expand');
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', 
        M11=0.7071067811865476, M12=-0.7071067811865475, 
        M21=0.7071067811865475, M22=0.7071067811865476)";}

#r4{z-index:2;-moz-transform: rotate(75deg);-webkit-transform: rotate(75deg);top:33px;left:177px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.25881904510252074,
        M12=-0.9659258262890683, M21=0.9659258262890683, 
        M22=0.25881904510252074,sizingMethod='auto expand');
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
        M11=0.25881904510252074, M12=-0.9659258262890683,
        M21=0.9659258262890683, M22=0.25881904510252074)";}

#r5{z-index:4;-moz-transform: rotate(105deg);-webkit-transform: rotate(105deg);top:71px;left:215px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.25881904510252085, 
        M12=-0.9659258262890683, M21=0.9659258262890683, 
        M22=-0.25881904510252085,sizingMethod='auto expand');
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
        M11=-0.25881904510252085, M12=-0.9659258262890683, 
        M21=0.9659258262890683, M22=-0.25881904510252085)";}

#b1{z-index:3;-moz-transform:rotate(105deg);-webkit-transform:rotate(105deg);top:71px;left:215px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.25881904510252085,
        M12=-0.9659258262890683, M21=0.9659258262890683, 
        M22=-0.25881904510252085,sizingMethod='auto expand');
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', 
        M11=-0.25881904510252085, M12=-0.9659258262890683,
        M21=0.9659258262890683, M22=-0.25881904510252085)";}

#b2{z-index:2;-moz-transform:rotate(135deg);-webkit-transform:rotate(135deg);top:124px;left:229px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865475,
        M12=-0.7071067811865476, M21=0.7071067811865476,
        M22=-0.7071067811865475,sizingMethod='auto expand');
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
        M11=-0.7071067811865475, M12=-0.7071067811865476,
        M21=0.7071067811865476, M22=-0.7071067811865475)";}

#b3{z-index:1;-moz-transform:rotate(165deg);-webkit-transform:rotate(165deg);top:177px;left:215px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.9659258262890682,
        M12=-0.258819045102521, M21=0.258819045102521, 
        M22=-0.9659258262890682,sizingMethod='auto expand');
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
        M11=-0.9659258262890682, M12=-0.258819045102521,
        M21=0.258819045102521, M22=-0.9659258262890682)";}

#b4{z-index:2;-moz-transform:rotate(195deg);-webkit-transform:rotate(195deg);top:215px;left:177px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.9659258262890684,
        M12=0.25881904510252035, M21=-0.25881904510252035,
        M22=-0.9659258262890684,sizingMethod='auto expand');
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
        M11=-0.9659258262890684, M12=0.25881904510252035,
        M21=-0.25881904510252035, M22=-0.9659258262890684)";}

#b5{z-index:5;-moz-transform:rotate(225deg);-webkit-transform:rotate(225deg);top:229px;left:124px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865477,
        M12=0.7071067811865475, M21=-0.7071067811865475,
        M22=-0.7071067811865477,sizingMethod='auto expand');
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
        M11=-0.7071067811865477, M12=0.7071067811865475,
        M21=-0.7071067811865475, M22=-0.7071067811865477)";}

#y1{z-index:4;-moz-transform:rotate(225deg);-webkit-transform:rotate(225deg);top:229px;left:124px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865477,
        M12=0.7071067811865475, M21=-0.7071067811865475, 
        M22=-0.7071067811865477,sizingMethod='auto expand');
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
        M11=-0.7071067811865477, M12=0.7071067811865475,
        M21=-0.7071067811865475, M22=-0.7071067811865477)";}

#y2{z-index:2;-moz-transform:rotate(255deg);-webkit-transform:rotate(255deg);top:215px;left:72px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.25881904510252063,
        M12=0.9659258262890683, M21=-0.9659258262890683,
        M22=-0.25881904510252063,sizingMethod='auto expand');
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
        M11=-0.25881904510252063, M12=0.9659258262890683, 
        M21=-0.9659258262890683, M22=-0.25881904510252063)";}

#y3{z-index:1;-moz-transform:rotate(285deg);-webkit-transform:rotate(285deg);top:176px;left:33px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.25881904510252113, 
        M12=0.9659258262890682, M21=-0.9659258262890682, 
        M22=0.25881904510252113,sizingMethod='auto expand');
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
        M11=0.25881904510252113, M12=0.9659258262890682, 
        M21=-0.9659258262890682, M22=0.25881904510252113)";}
#y4{z-index:2;-moz-transform:rotate(315deg);-webkit-transform:rotate(315deg);top:124px;left:19px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865473,
         M12=0.7071067811865477, M21=-0.7071067811865477,
         M22=0.7071067811865473,sizingMethod='auto expand');
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
         M11=0.7071067811865473, M12=0.7071067811865477, 
         M21=-0.7071067811865477, M22=0.7071067811865473)";}
#y5{z-index:4;-moz-transform:rotate(345deg);-webkit-transform:rotate(345deg);top:71px;left:33px;
    filter:  progid:DXImageTransform.Microsoft.Matrix(M11=0.9659258262890683, 
        M12=0.2588190451025207, M21=-0.2588190451025207,
        M22=0.9659258262890683,sizingMethod='auto expand');
  -ms-filter: progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
        M11=0.9659258262890683, M12=0.2588190451025207, 
        M21=-0.2588190451025207, M22=0.9659258262890683);}
</style>


<!--[if IE]>
<style type="text/css">
.red1 div,.red2 div,.red3 div{background:#f00;}
.blue1 div,.blue2 div,.blue3 div{background:#02f;}
.yellow1 div,.yellow2 div,.yellow3 div{background:#fc0;}
.red1 div,.blue1 div,.yellow1 div,.red2 div,.blue2 div,.yellow2 div{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);}
.red3 div,.blue3 div,.yellow3 div{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20);}

#s2{top:210px;left:211px;display:none;}
#s3{top:62px;left:62px;display:none;}
#r1{top:71px;left:32px;}
#r2{top:32px;left:71px;}
#r3{top:1px;left:109px;}
#r4{top:30px;left:175px;}
#r5{top:71px;left:215px;}
#b1{top:71px;left:215px;}
#b2{top:108px;left:216px;}
#b3{top:177px;left:215px;}
#b4{top:214px;left:175px;}
#b5{top:214px;left:110px;}
#y1{top:214px;left:110px;}
#y2{top:213px;left:72px;}
#y3{top:176px;left:33px;}
#y4{top:108px;left:6px;}
#y5{top:71px;left:32px;}
</style>
<![endif]-->


<div class="cw_out"><span id="s1"><span id="s2"></span><span id="s3"></span>
<div class=red3 id=r1><div></div></div>
<div class=red2 id=r2><div></div></div>
<div class=red1 id=r3><div></div></div>
<div class=red2 id=r4><div></div></div>
<div class=red3 id=r5><div></div></div>
<div class=blue3 id="b1"><div></div></div>
<div class=blue2 id=b2><div></div></div>
<div class=blue1 id=b3><div></div></div>
<div class=blue2 id=b4><div></div></div>
<div class=blue3 id=b5><div></div></div>
<div class=yellow3 id=y1><div></div></div>
<div class=yellow2 id=y2><div></div></div>
<div class=yellow1 id=y3><div></div></div>
<div class=yellow2 id=y4><div></div></div>
<div class=yellow3 id=y5><div></div></div>
</span></div>

Note: This hasn’t been adapted to opera yet. I have literally not had a single visitor on Opera. If you want an opera solution for this, let me know and I’ll whip one up.

Pages: 1 2

17 Responses to Color Wheels with only CSS3 and Primary Colors

  1. Pingback: CSS3 ile Yap?lm?? 10 Adet Mükemmel Çizim | Baranyaldiz.com | Bir'Acaip Blog

  2. Pingback: CSS3 ile Yap?lm?? 10 Adet Mükemmel Çizim | Web Tasar?m?

  3. Pingback: ?nan?lmaz CSS3 Uygulamalar? | Mert Arabac?er

  4. Pingback: ?css3???10?????????!

  5. Pingback: CSS3 ile Yap?lm?? 10 Adet Mükemmel Çizim | Grafik Tescil

  6. Pingback: ?nan?lmaz CSS3 Uygulamalar?

  7. Pingback: 10 Incredible CSS3 Drawing You Must See | ?????

  8. Pingback: 10 Incredible CSS3 Drawing You Must See

  9. Pingback: July’s Best Resources for CSS3

  10. Pingback: July’s Best Resources for CSS3 | ESSAAR ITI Blog

  11. Pingback: July’s Best Resources for CSS3

  12. Pingback: Tweets that mention Color Wheels with only CSS3 and Primary Colors – Crystal’s Adventures in Webdev Land - Crystal Odenkirk -- Topsy.com

Leave a Reply

Your email address will not be published. Required fields are marked *

Crystal Odenkirk My Patreon | My Youtube | CrysOdenkirk Linktr.ee |