Create round cornered boxes with Coldfusion and CSS
Recently, while working on a CMS based project for a client, I was suddenly stumped when I realised that my client had zero knowledge of CSS and/or HTML and would want to create coloured boxes with round corners. The kind of boxes that every web developer wished were easy to create (apparently CSS3 has provisions for this)! Obviously, us developers cannot show too much compliance with standards since we still have to support masterpiece softwares like Internet Explorer (particularly version 6), and so I thought I’d devise my own way to achieve this effect. This tutorial might seem a little tedious to complete, but it saved me and my client a lot of time.
Step 1
Fire up Photoshop or another graphics editing application. Create a new document with width and height of 20px. Make sure the background is set to Transparent. We are going to make the box very flexible. You will be able to place it on any background colour,
Step 2
Then create a circle of radius 10 pixels. For the purpose of this tutorial we will create the circle in a single colour, a nice orange with Hex code #FF9933. I put in a few guidelines to help me snap the Circle path tool. Notice also I divided the image into 4 quadrants. The will form the 4 corners.
Step 3
Now slice and dice your 4 quadrants. Use the guide lines to help you snap your selection.
Using the ‘Slice Select Tool’ double click on the 4 slices you created and rename them to ‘orange_tl’ for top left, ‘orange_tr’ for top right and so on. Remember, the ‘orange_’ part of the name is important as the component we are going to build will use this name. When you decide to create round boxes of other colours, this will come in handy.
Step 4
Go to the File menu and select ‘Save for Web & Devices…’
Select all four slices by holding down SHIFT and clicking on the slices. Select ‘PNG-24′ as the export format. Make sure the ‘Transparency’ checkbox is selected. Then click ‘Save’.
In the file save dialog, you need to make sure you select ‘Selected Slices’. This is a good practice when exporting slices. By default, Photoshop select ‘All Slices’ and this can be annoying when you end up with unnecessary image slices.
Phew! Almost done…
Right, the hard part is over….yeah right! Below is the all CSS you need to make round box magic:
<style>
h1, h2, h3, h4, h5, p{
margin:0;
}
body{font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
/* round boxes */
.whitebg {background-color:#FFFFFF;}
.orangebg {background-color:#FF9933;}
.redbg {background-color:#FF0000;}
.roundbox_orange_content {color: #FFFFFF;}
/* utility styles */
.nomargin{margin:0;}
.nopadding{padding:0;}
.floatleft{float:left;}
.floatright{float:right;}
.floatnone{float:none;}
.clearleft{clear:left;}
.clearright{clear:right;}
.clearboth{clear:both;}
.clearnone{clear:none;}
.padding10{ padding:10px;}
.padding10left{ padding-left:10px;}
.padding10right{ padding-right:10px;}
.padding10top{ padding-top:10px;}
.padding10bottom{ padding-bottom:10px;}
.padding20{ padding:20px;}
.padding20left{ padding-left:20px;}
.padding20right{ padding-right:20px;}
.padding20top{ padding-top:20px;}
.padding20bottom{ padding-bottom:20px;}
.padding30{ padding:30px;}
.padding30left{ padding-left:30px;}
.padding30right{ padding-right:30px;}
.padding30top{ padding-top:30px;}
.padding30bottom{ padding-bottom:30px;}
.margin10{ margin:10px;}
.margin10left{ margin-left:10px;}
.margin10right{ margin-right:10px;}
.margin10top{ margin-top:10px;}
.margin10bottom{ margin-bottom:10px;}
.margin20{ margin:20px;}
.margin20left{ margin-left:20px;}
.margin20right{ margin-right:20px;}
.margin20top{ margin-top:20px;}
.margin20bottom{ margin-bottom:20px;}
.margin30{ margin:30px;}
.margin30left{ margin-left:30px;}
.margin30right{ margin-right:30px;}
.margin30top{ margin-top:30px;}
.margin30bottom{ margin-bottom:30px;}
/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* stop commented backslash hack */
.border{border:1px solid red;}
</style>
Create a CFM page called ’roundbox.cfm’. This will be a module that we use to create a roundbox. The code for this page is given below:
<cfparam name="attributes.colour" default="orange"> <cfparam name="attributes.id" default="roundbox"> <cfparam name="attributes.radius" default=10> <cfparam name="attributes.float" default="left"> <cfparam name="attributes.clear" default="none"> <cfparam name="attributes.width" default=0> <cfparam name="attributes.height" default=""> <cfparam name="attributes.margin" default=10> <cfparam name="attributes.marginposition" default=""> <cfparam name="attributes.padding" default=10> <cfparam name="attributes.paddingposition" default="left,right"> <cfparam name="attributes.rawcss" default=""> <cfset theColour = attributes.colour> <cfset theID = attributes.id> <cfset theRadius = attributes.radius> <cfset theWidth = attributes.width> <cfset theHeight = attributes.height> <cfset theFloat = attributes.float> <cfif theFloat EQ "none"> <cfset theWidth = 0> </cfif> <cfset theClear = attributes.clear> <cfset theMarginPosition = attributes.marginposition> <cfset theMargin = attributes.margin> <cfif theMargin EQ 0> <cfset theMargin = "none"> </cfif> <cfif theMargin EQ "none"> <cfset theMarginString = ""> <cfelse> <cfset theMarginString = ""> <cfloop list="#theMarginPosition#" delimiters="," index="idx"> <cfset theMarginString = theMarginString & "margin" & theMargin & idx & " "> </cfloop> </cfif> <cfset thePaddingPosition = attributes.paddingposition> <cfset thePadding = attributes.padding> <cfif thePadding EQ "none"> <cfset thePaddingString = ""> <cfelse> <cfset thePaddingString = ""> <cfloop list="#thePaddingPosition#" delimiters="," index="idx"> <cfset thePaddingString = thePaddingString & "padding" & thePadding & idx & " "> </cfloop> </cfif> <cfset theRawCss = attributes.rawcss> <cfoutput> <cfif ThisTag.ExecutionMode EQ "start"> <div id="#theID#" class="float#theFloat# clear#theClear# #theMarginString# clearFix" style="width:#theWidth#px; #theRawCss#"> <div> <div style="width:#theRadius#px; height:#theRadius#px; float:left; clear:none; font-size:0;"><img src="/images/corners/#theColour#_tl.png" width="#theRadius#" height="#theRadius#"></div> <div style="width:#theWidth - (2 * theRadius)#px; height:#theRadius#px; float:left; clear:none; font-size:0;" class="#theColour#bg"></div> <div style="width:#theRadius#px; height:#theRadius#px; float:left; clear:none; font-size:0;"><img src="/images/corners/#theColour#_tr.png" width="#theRadius#" height="#theRadius#"></div> </div> <div class="clearboth #thePaddingString# #theColour#bg roundbox_#theColour#_content clearFix" style="height:#theHeight#;"> <cfelse> </div> <div> <div style="width:#theRadius#px; height:#theRadius#px; float:left; clear:none; font-size:0;"><img src="/images/corners/#theColour#_bl.png" width="#theRadius#" height="#theRadius#"></div> <div style="width:#theWidth - (2 * theRadius)#px; height:#theRadius#px; float:left; clear:none; font-size:0;" class="#theColour#bg"></div> <div style="width:#theRadius#px; height:#theRadius#px; float:left; clear:none; font-size:0;"><img src="/images/corners/#theColour#_br.png" width="#theRadius#" height="#theRadius#"></div> </div> </div> </cfif> </cfoutput>
Make sure the images are placed in the correct path and that the paths in the ’roundbox.cfm’ file match these.
Once the above are ready, you can now call the ’roundbox.cfm’ file as a ColdFusion module as shown below:
<cfmodule template="roundbox.cfm" colour="orange" id="mybox" width=200 margin=10 radius=10> <h3>Hi, I'm a round cornered box!</h3> <p>I'm really easy to make!</p> </cfmodule>
The above code produces the box shown below:
All parameters are configurable and this truly allows you to create a large variety of round corner boxes. Just look at the examples below:
Colour=purple
Radius=10
Colour=darkpink
Radius=5
Colour=pink
Radius=20
All that’s needed to create various coloured boxes is to have a CSS class named ‘.<theColour>bg’ and also a class named ‘.roundbox_<theColour>_content’ in case you need to format the contained text.
Hope you enjoyed my first tutorial. I hope this technique comes in handy for you like it has for me.
I would love to receive feedback, so please do post your comments!
Happy designing!
Tags: ColdFusion, CSS