Download Source Code: RoundPanels.zip - 76.44KB
 |  |  |
| Techniques and implementation of HTML round boxes for web site content. Most use either a TABLE-based or DIV-based implementation, but we also show how you can get similar effects with styles on DL/DT/DD or UL/LI elements. Some have a shadow or use an unusual implementation technique. The demo project includes all panels described here and is a typical HTML application, with no server-side pages and no JavaScript code. | ||
 | |  |
TABLE-Based Round Panels
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
This banner has a fixed-width picture with inside text. It has one table cell with text aligned at the center, on both vertical and horizontal axis. Main disadvantage is its fixed size, but its advantage is the simplicity. The box has usually a transparent background in its corners, to properly render the rounded effect on any page background color.
<table cellpadding="20px" border="0" cellspacing="0"
style="background-image: url(images/banner.png);
background-repeat: no-repeat; width: 230px; height: 122px;">
<tr>
<td valign="middle" align="center">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</td>
</tr>
</table>| Lorem ipsum dolor sit amet |
Sometimes it is enough to have a nice layout for some short messages or action buttons. The round box on the right consists in a single-row TABLE with three cells, each having an image on its background. The text message is rendered in the middle cell only.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td background="images/box19left.jpg"
height="30" width="20"></td>
<td background="images/box19.jpg"
height="30" valign="middle" align="center">
Lorem ipsum dolor sit amet
</td>
<td background="images/box19right.jpg"
height="30" width="20"></td>
</tr>
</table> |
 |
|
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | ||
 |
 |
The most simple implementation of a panel with round corners uses a TABLE with three rows and three columns. Each corner shows a semi-transparent GIF or PNG image, to properly render on any page background color. In this particular case, the four corner images are similar and can be obtained through rotations from one single image. Vertical and horizontal edges show a spacer (i.e. a one-pixel image or empty content), that gets automatically adjusted to the size determined by the adjacent cells. It also gets filled with whatever color you have in the back. The middle cell will be filled with the actual text or image content, whatever that is.
For all these panels we'll prefix each related image and CSS class name by "box", followed by a unique identifier number and the region the style refers to ( topleft, top, topright, left, middle, right, bottomleft, bottom, bottomright). For instance, box8topleft can be the CSS class name and the image file name for the round panel 8, related to its top-left corner area.
Depending where your images are and where you declared your styles (this may be a separate CSS file), don't forget to review and eventually change the image locations, in IMG's SRC attribute or the URL style attribute.
|
|
|
| Lorem Ipsum | ||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | ||
|
|
|
Previous panel can be adapted to show a title bar with a different color. This is possible because these corner images have the transparency set for the filled regions, so they will take the color of whatever background you decide within the panel. However, if you want to show the box on a different page background, this will leave white spots on the corners. Images can be shown as either inside HTML cell elements or cell backgrounds. For the header, we added a second row, expanded on all three columns. Last two table rows show the content, in a different color.
<table width="200" bgcolor="#009999" style="line-height: normal"
cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="6" align="left"><img
src="images/box8topleft.gif"
width="6" height="6" border="0" alt="" /></td>
<td><div class="spacer"></div></td>
<td width="6" align="right"><img
src="images/box8topright.gif"
width="6" height="6" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3" align="center" valign="top"
style="color: white; font-size: 12px;
font-weight: bold; padding-bottom: 5px;">
Lorem Ipsum
</td>
</tr>
<tr bgcolor="#99cccc">
<td width="6"><div class="spacer"></div></td>
<td align="center" style="padding: 5px;">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</td>
<td width="6"><div class="spacer"></div></td>
</tr>
<tr bgcolor="#99cccc">
<td width="6" align="left"><img
src="images/box8bottomleft.gif"
width="6" height="6" border="0" alt="" /></td>
<td><div class="spacer"></div></td>
<td width="6" align="right"><img
src="images/box8bottomright.gif"
width="6" height="6" border="0" alt="" /></td>
</tr>
</table> |
 |
|
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | ||
 |
 |
This small box is similar with the panel before, but we included some border style on each edge (in fact, each edge is now rendered by a background image), and we separately declared the CSS styles.
<style>
.box31 {
width: 100%;
font: 11px Tahoma;
line-height: normal;
color: White;
}
.box31topleft {
border-width: 0;
width: 5px;
height: 5px;
}
.box31top {
border-top: 0 solid rgb(139, 139, 139);
background-color: rgb(247, 247, 247);
background-image: url(images/box31top.gif);
background-repeat: repeat-x;
}
.box31topright {
border-width: 0;
width: 5px;
height: 5px;
}
.box31left {
border-left: 0 solid rgb(139, 139, 139);
background-color: rgb(247, 247, 247);
background-image: url(images/box31left.gif);
}
.box31middle {
padding: 5px;
background-color: #0D3D70;
width: 100%;
vertical-align: top;
}
.box31right {
border-right: 0 solid rgb(139, 139, 139);
background-color: rgb(247, 247, 247);
background-image: url(images/box31right.gif);
}
.box31bottomright {
border-width: 0;
width: 5px;
height: 5px;
}
.box31bottom {
border-bottom: 0 solid rgb(139, 139, 139);
background-color: rgb(247, 247, 247);
background-image: url(images/box31bottom.gif);
background-repeat: repeat-x;
}
.box31bottomright {
border-width: 0;
width: 5px;
height: 5px;
}
</style>
<table class="box31" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img class="box31topleft"
src="images/box31topleft.png" alt="" /></td>
<td class="box31top"><div class="spacer"></div></td>
<td><img class="box31topright"
src="images/box31topright.png" alt="" /></td>
</tr>
<tr>
<td class="box31left"><div class="spacer"></div></td>
<td class="box31middle">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</td>
<td class="box31right"><div class="spacer"></div></td>
</tr>
<tr>
<td><img class="box31bottomleft"
src="images/box31bottomleft.png" alt="" /></td>
<td class="box31bottom"><div class="spacer"></div></td>
<td><img class="box31bottomright"
src="images/box31bottomright.png" alt="" /></td>
</tr>
</table> |
 |
|
| Lorem Ipsum | ||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | ||
 |
 |
Following the design guidelines of the content-header panel presented before, you can create any kind of appearance, such as this XP-style window panel. There is a specific image created for each corner and edge, that we can show in either a cell background or as IMG element within the cell.
 |
||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | ||
 |
A round panel can use different shapes for its corners. In this case, only the top-left and the bottom-right corners require images. The rest of the border is created through HTML styles. Second corner image can be simply obtained through rotations from the first image.
<style>
.box15 {
width: 100%;
font-family: Verdana;
font-size: 11px;
line-height: normal;
color: OliveDrab;
}
.box15topleft {
width: 16px;
height: 16px;
border: 0;
}
.box15bottomright {
width: 16px;
height: 16px;
border: 0;
}
.box15top {
background-color: #ECFEDA;
border-top: Solid 2px #94C43A;
}
.box15topright {
background-color: #ECFEDA;
border-top: Solid 2px #94C43A;
border-right: Solid 2px #94C43A;
}
.box15left {
background-color: #ECFEDA;
border-left: Solid 2px #94C43A;
}
.box15middle {
padding: 0;
background-color: #ECFEDA;
width: 100%;
text-align: justify;
}
.box15right {
background-color: #ECFEDA;
border-right: Solid 2px #94C43A;
}
.box15bottomleft {
background-color: #ECFEDA;
border-left: Solid 2px #94C43A;
border-bottom: Solid 2px #94C43A;
}
.box15bottom {
background-color: #ECFEDA;
border-bottom: Solid 2px #94C43A;
}
</style>
<table class="box15" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img class="box15topleft" alt="" border="0"
src="images/box15topleft.png" /></td>
<td class="box15top"><div class="spacer"></div></td>
<td class="box15topright"><div class="spacer"></div></td>
</tr>
<tr>
<td class="box15left"><div class="spacer"></div></td>
<td class="box15middle">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</td>
<td class="box15right"><div class="spacer"></div></td>
</tr>
<tr>
<td class="box15bottomleft"><div class="spacer"></div></td>
<td class="box15bottom"><div class="spacer"></div></td>
<td><img class="box15bottomright" alt="" border="0"
src="images/box15bottomright.png" /></td>
</tr>
</table>And here is a template with top-right corner peeling effect, that can be used for the main content area of your site, with a dark page background:
 |
Lorem Ipsum |  |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | ||
 |
 |
|
Subscribe and Share: 
