Amazon Buttons

It seems that ever website today needs to have rounded corners.  Let’s take a look at one of the pages I currently work with; the Amazon gift card order page.  https://www.amazon.com/gp/gc/order.  Looking at this snapshot you can see there are a lot of rounded boxes in our design.  Looking at the source of the page I counted 28 instances of round box divs.  In addition there are 8 different variations of these round box divs.  This is quite a lot and it doesn’t count round boxes that are made by JavaScript interaction which can even result in an additional 2 style variations of the round boxes.  The rounded corners look nice for the design but it can be a pain to develop.  I’ve recently rebuilt the current implementation for my team’s rounded box code.  The goal of this post is to look at the new execution and show where it improves upon the current implementation.
Let’s take a look at what is currently happening.  We have a lot of different use cases where we use our round box code.  The current implementation allows for headers and footers with different colors and borders around content.  Here is a look for just one look and feel for our round boxes, which goes through most of the possible structures the round box can have.

This screenshot only shows one look and feel.  Currently we have 10 different variations to the round box style where we change border color, background color, and the exterior color of where the round box is.  Here is what our full test page looks like to include the different styles.

http://gregthebusker.com/roundbox/round-box-test-page.png

The main thing I want to look at is the image sprite for the round corners.  Here is what is currently being used.

The main thing to notice is that for each of the different combination of exterior color, border color, and interior color, there is a 12px by 12px circle.  This means that if we wanted to create a new style where any of the three properties of the round box change we would have to add another 12px by 12px circle to the sprite.  It also means that each new style requires a change to the CSS and the image sprite.  My goal was to improve upon the maintainability of the system.  To do this a new sprite was created as shown here.

The new sprite is clearly a lot smaller.  It is 65% smaller in both number of pixels and byte size.  Originally when I made the image I didn’t see a lot of savings by size, but I just had to run some png compression tools and I so a lot of improvements.  Awesome!  The key difference can be explained by looking at the outlined section of the two sprites below.

Old Sprite

New Sprite

These two circles may look the same, but the center of the newer one is transparent.  This allows us to no longer have a sprite dependency on the interior color of the box.  It works by allowing the background color of the surrounding div to display through to the foreground.  We can now change the background color in the CSS only and not need to create a new circle for the image sprite. This 3d view might help to visualize how the round box corners allow for the background color to display to the foreground.

Even though I had working round box html and css, I decided it would be best to scrap it and start fresh.  The concept of a round box is fairly simple.  In addition to just have some rounded corners around some content I had to incorporate the use of headers, sub headers, and footers.  The markup was fairly simple.  You start with a div to work as the background.  Then two b tags for your corners.  H2 and H3 is headers exists followed by a div to put the content.  Lastly a div to hold the footer which as a span for the footer text and two b tags for the bottom corners.  Here is what it would look like.

<div> //Background div
  <b></b>  //corner
  <b></b>  //corner
  <h2></h2> //header
  <h3><h3>  //sub-header
 <div></div>  //div for content
  <div>  //div for the footer
    <div></div> //Footer
    <b></b>  //corner
    <b></b>  /corner
    <span></span> //I'll explain this later
  </div>  //end footer div
</div>  //end background div

The markup is clean and simple for the use case.  Next is the tricky part working with the styles.  In our test page we had a few variations of the round box.  Things have to change if there are footers and/or headers.  I’m going to just talk about a round box that has a header, sub header and footer for it has the most complications.  It get the others round boxes one can easily remove/alter a few CSS classes to obtain their required look and feel.

Our round box has a header and footer where the background color is a light blue(#ebf3ff), the main content is white(#fff) and the out most border is blue(#c9e1f5).  We can quickly make classes for each of these colors.  Here is what it looks like

.RBT1 { /* RBT1 = round-box-title-style-1*/
    background-color: #ef3ff;
}
.RBC1 { /* RBC1 = round-box-content-style-1*/
    background-color: #fff;
}
.RBB1 { /* RBB1 = round-box-border-style-1*/
    background-color: #c9e1f5;
}

Now lets apply it to the HTML.

<div class="RBB1 RBT1"> //Background div
  <b></b>  //corner
  <b></b>  //corner
  <h2>Header</h2>
  <h3>Sub-Header<h3>
  <div class="RBC1">Some Content</div>
  <div class="RBT1">  //div for the footer
    <div>Footer</div>
    <b></b>  //corner
    <b></b>  /corner
    <span></span> //I'll explain this later
  </div>  //end footer div
</div>  //end background div

I also added the background color for the header to the footer div.  I shouldn’t need to do this but IE wouldn’t always display the correct color as the background of the footer so I added the same class to the footer.  IE also has a bug where it renders background colors on top of the content inside a div.  This is called by many as the peekaboo bug for scrolling down on the page will cause the browser to redraw it correctly.  There are a few ways to fix this.  I chose to add a line height to the parent div like so.

.RB {
    line-height: 1.1em;
}
<div class="RB RBB1 RBT1"> //Background div
  <b></b>  //corner
  <b></b>  //corner
  <h2>Header</h2>
  <h3>Sub-Header<h3>
  <div class="RBC1">Some Content</div>
  <div class="RBT1">  //div for the footer
    <div>Footer</div>
    <b></b>  //corner
    <b></b>  /corner
    <span></span> //I'll explain this later
  </div>  //end footer div
</div>  //end background div

Now that we have the general look and feel down lets talk rounded corners.  First lets just get the background image in place.  My rounded corners have a radius of 6 pixels, so my b tag needs to be 6 pixels wide and tall.  We also need to get the background position and position it to the right section of the circle.  Each corner will have a different position like so.

b.RBTL, /* round-box-top-left*/
b.RBTR, /* round-box-top-right*/
b.RBBL, /* round-box-bottom-left*/
b.RBBR { /* round-box-bottom-right*/
    background-repeat: no-repeat;
    background-image: url(what-your-sprite.is);
    height: 6px;
    width: 6px;
    overflow: hidden;
}
b.RBTL1 {
    background-position: 0 -24;
}
b.RBTR1 {
    background-position: -6 -24;
}
b.RBBL1 {
    background-position: 0 -30;
}
b.RBBR1 {
    background-position: -6 -30;
}

Now that we have our corners looking correctly lets start positioning them correctly.  For the top two corners we need one to go the top left and one in the top right.  We can do this simply with floats.  Floating one to the left and one to the right.  Now whenever we float a div we need to clear it so the parent div can know it’s height.  For the top two rounded corners we add a style that clears the float with the main content div.  For the bottom two corners we need a also clear their floats.  This is were that extra span comes in.  Once we float everything correctly our CSS and HTML will look like this.

b.RBTL,
b.RBBL {
    float: left;
}
b.RBTR,
b.RBBR {
    float: right;
}
.RBC, .RBS, .RBF {
    clear: both;
}
.RBS {
    display: block;
}
.RBF {
   width: 100%;
}
<div class="RB RBB1 RBT1"> //Background div
  <b class="RBTL"></b>  //corner
  <b class="RBTR"></b>  //corner
  <h2>Header</h2>
  <h3>Sub-Header<h3>
  <div class="RBC1">Some Content</div>
  <div class="RBT1 RBF">  //div for the footer
    <div>Footer</div>
    <b class="RBBL"></b>  //corner
    <b class="RBBR"></b>  /corner
    <span class="RBS"></span> //I'll explain this later
  </div>  //end footer div
</div>  //end background div

I also added a class to the footer div to give it a width of 100% and to also clear floats. Clearing floats here is makes sure that the footer starts in the right place. There were a few instances where the creater of the content forgot to clear his floats and it made things look off. The width 100% is to make sure the corners go all the way to the ends which IE didn’t always like to do.

At this point the corners are position inside of the outside border.  All we need to do is move them over a few pixels.  Because our border are 1 px in width we need to move each corner 1px up and over(down and over for the bottom two).  To do this we need to make each corner’s position relative.  Then just move it over to the correct spot.  Making the tag position: relative means that it will be placed relative to it’s normal position.  So for the top left corner we need it to move it one pixel up (top: -1px) and one pixel to the left (left: -1px).  Doing it for all the corners look like this.

b.RBTL,
b.RBTR,
b.RBBL,
b.RBBR {
    background-repeat: no-repeat;
    height: 6px;
    width: 6px;
    overflow: hidden;
    position: relative;
}
b.RBTL,
b.RBBL {
    left: -1px;
    float: left;
}
b.RBTR,
b.RBBR {
    right: -1px;
    float: right;
}
b.RBTR,
b.RBTL {
    top: -1px;
}
b.RBBL,
b.RBBR {
    bottom: -1px;
}

And just like that we are done.  Pretty simple.  Now if we want to add a new style all we have to do is change the background and border colors, plus the corner background image positions.  Once I did this I compared it to what we currently had and I saw some major improvements.  The total weight of our test page decreased by 40%, the CSS file decreased by 60%, and the new spite 65% smaller and more flexible.

We also have a JavaScript file that we use to change round box styles on the fly.  We sometime alter the round box but keep the same content.  We even have a use case where the background color has an animated color change.  Before when the rounded corners were not transparent on the inside this was not possible to do because the corner images couldn’t change gradually.  Anyway, when I rewrote a new JavaScript file for my new round box design it ended up being 36% smaller than the last one.

Feel free to use this idea on your website to build a more maintainable and bulletproof rounded box.