Create Rounded Corners And Gradient Images On The Fly!

I am often tasked with taking a mockup and branding a site. This usually involves a custom master page with tweaks to the CSS for the layout and color scheme. It also involves the creation of images used to compliment the UI, the holy grail for some being gradient images and rounded corners. For the amateur graphic designer like myself, this often becomes a tedious task that involves repetitive tweaks to an image. I once had a client tell me that I had the wrong shade of “pumpkin”. (Depending on your disposition, this could result in an act of either running full speed into a brick wall or rocking yourself to sleep every night.)
Enter the poorly named Web Designer Tool! After some experimentation with the System.Drawing and System.Drawing.Drawing2D .NET 2.0 classes, I figured out a way to generate these images on the fly. Now I can rapidly create rounded corners and gradients and don't have to sweat it if a client needs a color or hue adjusted. The rounded corners include many options, including width, height, gradient and solid colors, radius corner size, and border. I also provide a preview feature that integrates the images into a sample html page and launches it in your default browser. I have successfully tested this in IE 6.0 ~ 8.0, Chrome 10.0, and Firefox 4.0.
Note: Although this will fly in the face of CSS purists, I have decided to use a simple table based layout for the preview html. I do make an effort to use DIV based layouts for web design, but in this case I have yet to find approach that works flawlessly across browsers types and versions or that integrates nicely with SharePoint. If you are that CSS guru, I welcome you to take these images and come up with a better approach. If you are successful, I would love to try out your code. You are also welcome to use my Shapes.cs class below and build your own tool. Life will be much easier once CSS 3 has reached enough market penetration and we can simply use the border-radius property.

DIV based CSS vs. Tables - CSS Tricks and Performance Review

After initially failing to find an easy, efficient, and cross-browser compatible way of writing CSS for complex forms, I came across a layout foundation called YUI Grids CSS at the Yahoo! Development Network. I would highly recommend using the YUI framework for page layout, since it covers many scenarios including cross-browser compliance. However, if you are going to be doing a complex form layout with dozens of layout cells, the performance is slower than with using a traditional table. In my informal tests, I found load times to be 20~30% slower when using YUI than a simple table. You can see an example of the form I used in my previous blog post labeled Using CSS - Complex Forms Without Tables? Anyone? Anyone?. Ultimately, I will be using these concepts to create a form generation tool that will create forms on the fly with all the general event handling.

Fortunately, I was able to adopt some of the ideas within the YUI CSS framework and simplify it for form layout developments and make the DIV and CSS based layout perform 25% better. I created examples of forms that include up to 10 columns. The container DIV will always have the class divContainer and the items inside will always have a class called divItem[ColumnNumber]. The following example will have content divided into 3 equal parts.

<div class="divContainer">
    <div class="divItem3">Column 1 Content</div>
    <div class="divItem3">Column 2 Content</div>
    <div class="divItem3">Column 3 Content</div>
</div>

You can also mix and match assuming the item fractions add up properly. (For example: 1/3 + 1/3 + 1/6 + 1/6 = 1)

<div class="divContainer">
    <div class="divItem3">Column 1 Content</div>
    <div class="divItem3">Column 2 Content</div>
    <div class="divItem6">Column 3 Content</div>
    <div class="divItem6">Column 4 Content</div>
</div>

You can also add your own custom css based on existing ones. In this example, I wanted to tweak the 4 column layout so that the first two columns were a bit different. Since the original two column widths would have added up to 48%, I just had to make sure they were calculated appropriately.

        .divItem4
        {
            float: left;
            width: 24%;
            margin-left: 1%;
        }      
       .divItem4Custom1
        {
            float: left;
            width: 9%;
            margin-left: 1%;
        }
        .divItem4Custom2
        {
            float: left;
            width: 35%;
            margin-left: 1%;
        }

<div class="divContainer">
    <div class="divItem4Custom1">Column 1 Custom Content</div>
    <div class="divItem4Custom2">Column 2 Custom Content</div>
    <div class="divItem4">Column 3 Content</div>
    <div class="divItem4">Column 4 Content</div>
</div>

I have included the code for the table based and CSS based and correlating performance results below. As I mentioned earlier, the columns are based on equal sizes, so you can tweak these to make them variable. Also note that if you change the margins are padding, the width will need to be tweaked. I have set the left margin to 1px by default.

As far as centering is concerned, IE doesn't recognize auto margins, so you have to make sure that the body has the text-align set to center and container DIV's to have text-align set to left. All container DIV's also need to include the pseudo element "after" which allows you to include content after the closing tag.

Performance Results

The following tests were performed using Google Chrome's Javascript Console (Ctrl+Shift+J) which allows you to see the load time in milliseconds. I loaded each page 10 times, removed the highest outlier, and then got the average. As you can see below, the CSS Load Time was 25.5814% faster. You can see the full code I used below.

DIV CSS Load Time (ms)	Table Load Time (ms)
32	43
37	80 (Outlier)
43	43
76 (Outlier)	55
32	41
31	55
40	36
32	42
48	36
32	40
Average: 36.33333	Average: 43.44444

Code

Compatible Browsers:  Microsoft IE: 7.0.5730.13CO / Google Chrome: 1.0.154.36 / Firefox 3.0.1

DIV Based CSS HTML:

<html>
  <head>
    <style type="text/css">
        body
        {
            text-align: center;
        }
        .divContainer
        {
            border-left-style: solid;
            border-left-width: 1px;
            border-left-color: black;
            border-right-style: solid;
            border-right-width: 1px;
            border-right-color: black;
            border-top-style: solid;
            border-top-width: 0px;
            border-top-color: black;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: black;
            width: 950px;
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }
        .divContainerFirst
        {
            border-left-style: solid;
            border-left-width: 1px;
            border-left-color: black;
            border-right-style: solid;
            border-right-width: 1px;
            border-right-color: black;
            border-top-style: solid;
            border-top-width: 1px;
            border-top-color: black;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: black;
            width: 950px;
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }
        .divContainer:after
        {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .divContainerFirst:after
        {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

.divItem1
{
    float: left;
    width: 99%;  /*Total: 99%*/
    margin-left: 1%;
}
.divItem2
{
    float: left;
    width: 48%;  /*Total: 96%*/
    margin-left: 1%;
}
.divItem3
{
    float: left;
    width: 32%; /*Total: 96%*/
    margin-left: 1%;
}
.divItem4
{
    float: left;
    width: 24%;  /*Total: 96%*/
    margin-left: 1%;
}
.divItem5
{
    float: left;
    width: 19%;  /*Total: 95%*/
    margin-left: 1%;
}
.divItem6
{
    float: left;
    width: 15.5%;  /*Total: 93%*/
    margin-left: 1%;
}
.divItem7
{
    float: left;
    width: 13.25%;  /*Total: 92.75%*/
    margin-left: 1%;
}
.divItem8
{
    float: left;
    width: 11.4%;  /*Total: 91.2%*/
    margin-left: 1%;
}
.divItem9
{
    float: left;
    width: 10.0%;  /*Total: 90%*/
    margin-left: 1%;
}
.divItem10
{
    float: left;
    width: 8.9%;  /*Total: 89%*/
    margin-left: 1%;
}

  </style>
  </head>
  <body>    <div class="divContainerFirst">
        <div class="divItem1">
            1 Column: Imagination is more important than knowledge. Albert Einstein</div>
    </div>
    <div class="divContainer">
        <div class="divItem2">
            2 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem2">
            2 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
    </div>
    <div class="divContainer">
        <div class="divItem3">
            3 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem3">
            3 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem3">
            3 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
    </div>
    <div class="divContainer">
        <div class="divItem4">
            4 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem4">
            4 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem4">
            4 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem4">
            4 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
    </div>
    <div class="divContainer">
        <div class="divItem5">
            5 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem5">
            5 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem5">
            5 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem5">
            5 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem5">
            5 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
    </div>
    <div class="divContainer">
        <div class="divItem6">
            6 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem6">
            6 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem6">
            6 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem6">
            6 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem6">
            6 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem6">
            6 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
    </div>
    <div class="divContainer">
        <div class="divItem7">
            7 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem7">
            7 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem7">
            7 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem7">
            7 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem7">
            7 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem7">
            7 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem7">
            7 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
    </div>
    <div class="divContainer">
        <div class="divItem8">
            8 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem8">
            8 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem8">
            8 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem8">
            8 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem8">
            8 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem8">
            8 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem8">
            8 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem8">
            8 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
    </div>
    <div class="divContainer">
        <div class="divItem9">
            9 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem9">
            9 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem9">
            9 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem9">
            9 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem9">
            9 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem9">
            9 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem9">
            9 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem9">
            9 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem9">
            9 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
    </div>
    <div class="divContainer">
        <div class="divItem10">
            10 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem10">
            10 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem10">
            10 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem10">
            10 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem10">
            10 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem10">
            10 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem10">
            10 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem10">
            10 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem10">
            10 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
        <div class="divItem10">
            10 Columns: Imagination is more important than knowledge. Albert Einstein
        </div>
</body>
</html>

Table Based HTML:

<html>
  <head>
    <style type="text/css">
        body
        {
            text-align: center;
        }
        .divContainer
        {
            border-left-style: solid;
            border-left-width: 1px;
            border-left-color: black;
            border-right-style: solid;
            border-right-width: 1px;
            border-right-color: black;
            border-top-style: solid;
            border-top-width: 0px;
            border-top-color: black;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: black;
            width: 950px;
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }
        .divContainerFirst
        {
            border-left-style: solid;
            border-left-width: 1px;
            border-left-color: black;
            border-right-style: solid;
            border-right-width: 1px;
            border-right-color: black;
            border-top-style: solid;
            border-top-width: 1px;
            border-top-color: black;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: black;
            width: 950px;
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }
        .divContainer:after
        {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .divContainerFirst:after
        {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    </style>
  </head><body>
    <table class="divContainerFirst">
        <tr>
            <td>
                1 Column: Imagination is more important than intelligence. Albert Einstein.
            </td>
        </tr>
    </table>
    <table class="divContainer">
        <tr>
            <td>
                2 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                2 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
        </tr>
    </table>
    <table class="divContainer">
        <tr>
            <td>
                3 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                3 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                3 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
        </tr>
    </table>
    <table class="divContainer">
        <tr>
            <td>
                4 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                4 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                4 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                4 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
        </tr>
    </table>
    <table class="divContainer">
        <tr>
            <td>
                5 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                5 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                5 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                5 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                5 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
        </tr>
    </table>
    <table class="divContainer">
        <tr>
            <td>
                6 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                6 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                6 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                6 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                6 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                6 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
        </tr>
    </table>
    <table class="divContainer">
        <tr>
            <td>
                7 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                7 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                7 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                7 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                7 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                7 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                7 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
        </tr>
    </table>
    <table class="divContainer">
        <tr>
            <td>
                8 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                8 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                8 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                8 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                8 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                8 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                8 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                8 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
        </tr>
    </table>
    <table class="divContainer">
        <tr>
            <td>
                9 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                9 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                9 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                9 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                9 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                9 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                9 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                9 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                9 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
        </tr>
    </table>
    <table class="divContainer">
        <tr>
            <td>
                10 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                10 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                10 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                10 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                10 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                10 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                10 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                10 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                10 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
            <td>
                10 Columns: Imagination is more important than intelligence. Albert Einstein.
            </td>
        </tr>
    </table>
</body></html>

Using CSS - Complex Forms Without Tables? Anyone? Anyone?

I have spent the last couple weeks doing research on CSS form development for very complex forms that involve things like multiple sections and multiple columns. I often hear that "tables are evil" or that "tables should only use them for tabular data", and I was determined to find a way to incorporate CSS for my next form.

I decided to do some in depth research to determine if there was a standard or best practice for complex form development. Fortunately for me, there are thousands of examples on the web and others that can be found in various books. I decided to purchase The CSS Anthology - 101 Essential Tips, Tricks & Hacks by Rachel Andrews which has a number of great examples. I also downloaded a free book by the same publisher titled The Art & Science of CSS I also went to Borders bookstore and spent some more time perusing through about eight different CSS books. Another book by Rachel Andrew even had the promising title HTML Utopia: Designing Without Tables.

Unfortunately, I could not find a single example that would meet my requirements. Pretty much every example I encountered had a very simple form, usually a very standard one with name, address, and zip code. I could not find a single form that was more complex that involved things like multiple sections and multiple columns.

Ultimately, I have come to the conclusion that while there may be a solution for a complex form using CSS, it hasn't been documented or standardized. Until then, I plan to continue using tables to develop complex forms. If anyone out there in the blogosphere has any suggestions I am posting a screenshot of the form.

Example: