Multi-Colored CSS Circles and the Case of the Galaxy Note 3

In Technical Brief by Chris Strahorn

At Ivity Labs, we’re passionate about UX design and we think the details matter. While working on the Mobilizer – Canvas product, I faced an interesting challenge. When representing color selectors for the user we wanted to be accurate and illustrate that this phone had a black/gold combination. I created CSS circles with multiple sections at a forty-five degree angle to solve the problem (as illustrated below).

Note 3

As for implementation, there are a couple of options. I could always make an image for each circle. In fact, this is what Samsung does on their own website. However, I don’t really want to make a new image if this happens again in the future, so I decided to stick with HTML and CSS.

If you’re new to CSS, how to make CSS circles isn’t entirely obvious (veterans bear with me). However, it is pretty easy, all you need to do is set the border-radius to be the same value as the height and width. I’ve made a SASS mixin to help out.


@mixin circle($size){
height: $size;
width: $size;
border-radius: $size;
-moz-border-radius: $size;
-webkit-border-radius: $size;
}

If you’re not familiar with SASS or mixins, check out the Sass Guide. Now we can do all sorts of circular things in one color, like so:

One Color Circle Result
One Color Circle Example SASS

.red-circle{
display: inline-block;
margin-right: 10px;
@include circle(50px);
background: red;
}
.blue-circle{
display: inline-block;
margin-right: 10px;
@include circle(75px);
background: blue;
}
.green-circle{
display: inline-block;
margin-right: 10px;
@include circle(100px);
background: green;
}
One Color CSS Circles Example HTML

<div class="red-circle"></div>
<div class="blue-circle"></div>
<div class="green-circle"></div>

That’s all well and good, but it doesn’t solve our problem with the Note 3. We need to be able to do two colors, or rather two half circles with one color. Just as you can make circles in css using borders creatively, you can also make half circles. I made another mixin to help:


@mixin half-circle($size){
height: $size/2;
width: $size;
border-radius: $size $size 0 0;
-moz-border-radius: $size $size 0 0;
-webkit-border-radius: $size $size 0 0;
}

Now we can make multi-color CSS circles, just like in the app!

Multi-color Circle Example 1 Result
Multi Color Circle Example 1 SASS

.split-circle{
height:30px;
width: 30px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display: inline-block;
margin-right:20px;
.black-half, .gold-half{
@include half-circle(30px);
}
.black-half{
background: #000;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.gold-half{
background: #D6AA94;
}
}
Multi Color Circle Example 1 HTML

<div class="split-circle">
<div class="gold-half"></div>
</div>
<div class="split-circle">
<div class="black-half"></div>
</div>
<div class="split-circle">
<div class="gold-half"></div>
<div class="black-half"></div>
</div>

Mission Accomplished! Well not quite. As a programmer, I’m paranoid about +1 issues. What if, for example, Samsung decides to put out a special Italian or French edition of the Note 4? I don’t really want to do a bunch of work on how to make the middle layer seem circle-ish. And if Microsoft decides to do a classic Windows logo phone with the four Windows colors, ugh… I don’t even want to think about it. What we can do instead is try to find a way to have a circle with any number of colors. We already know how to make something circular, so let’s make a square that can have any number of colors colors that are all the same size. The easiest way to do this is to use CSS Tables.

Tables Example Result
Tables Example SASS

.table{
display: table;
height: 50px;
width: 50px;
}
.table-cell{
display: table-cell;
}
.italy{
.green{	background: #009246; }
.white{ background: #F1F2F1; }
.red{ background: #CE2B37; }
}
.france{
.blue{ background: #0055A4; }
.white{ background: #FFF; }
.red{ background: #EF4135; }
}
.windows{
.red{ background: #CE4B32; }
.green{ background: #4B992C; }
.blue{ background: #748BA8; }
.yellow{ background: #C2B936; }
}
.rainbow{
.red{ background: #F00; }
.orange{ background: #FF7F00; }
.yellow{ background: #FF0; }
.green{ background: #0F0; }
.blue{ background: #00F; }
.indigo{ background: #6F00FF; }
.violet{ background: #7F00FF; }
}
Tables Example HTML

<div class="table italy">
<div class="table-cell green"></div>
<div class="table-cell white"></div>
<div class="table-cell red"></div>
</div>
<div class="table france">
<div class="table-cell blue"></div>
<div class="table-cell white"></div>
<div class="table-cell red"></div>
</div>
<div class="table windows">
<div class="table-cell red"></div>
<div class="table-cell green"></div>
<div class="table-cell yellow"></div>
<div class="table-cell blue"></div>
</div>
<div class="table rainbow">
<div class="table-cell red"></div>
<div class="table-cell orange"></div>
<div class="table-cell yellow"></div>
<div class="table-cell green"></div>
<div class="table-cell blue"></div>
<div class="table-cell indigo"></div>
<div class="table-cell violet"></div>
</div>

Great! Now we just have to get our table inside a circle. All we need to do is wrap the table in a new div, then apply the circle mixin and rotate. However, in order to clip the table into our circle, we also need to set the overflow property to hidden.

Note: in order to keep the example short, I’ve removed all of the css that was shown in the previous example.

Multi Color Example 2 Result
Multi Color Example 2 SASS

.circle{
@include circle(50px);
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
overflow: hidden;
display: inline-block;
margin-left: 10px;
}
.table{
height: 100%;
width: 100%;
display: table;
}
Multi Color Example 2 HTML

<div class="circle">
<div class="table italy">
<div class="table-cell green"></div>
<div class="table-cell white"></div>
<div class="table-cell red"></div>
</div>
</div>
<div class="circle">
<div class="table france">
<div class="table-cell blue"></div>
<div class="table-cell white"></div>
<div class="table-cell red"></div>
</div>
</div>
<div class="circle">
<div class="table windows">
<div class="table-cell red"></div>
<div class="table-cell green"></div>
<div class="table-cell yellow"></div>
<div class="table-cell blue"></div>
</div>
</div>
<div class="circle">
<div class="table rainbow">
<div class="table-cell red"></div>
<div class="table-cell orange"></div>
<div class="table-cell yellow"></div>
<div class="table-cell green"></div>
<div class="table-cell blue"></div>
<div class="table-cell indigo"></div>
<div class="table-cell violet"></div>
</div>
</div>

And there you have it: a reliable way to create multi-color circles. The great thing about this approach is that it doesn’t matter how many colors you have AND it works all the way back to IE8. Neat!

Mobile1st is a leader in marketing technology and site optimization solutions. More than prioritizing and executing industry leading CRO practices, we do what makes the money; optimizing our Client’s digital commerce product toward consistent financial growth and ROI. All achieved through excellence in Lean UX, Analytics, Research, Experimentation and Development.
Contact Mobile1st Experts Now!