Download Source Code: RoundPanels.zip - 76.44KB
Special Techniques
- Lorem Ipsum
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem Ipsum
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem Ipsum
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Most round panels are built with either TABLE-based or DIV-based elements. There are however other HTML block elements that can be used for similar effects. For instance, alter the styles of the DL-DT-DD combination (which provides HTML definition lists) and you get panels like the ones on the right.
These panels have fixed width, depending on the images created to render the full top and bottom edges. Between the header and the content there will be a thin white line. DL provides the bottom image, DT the top header image. And while both these images have a transparent filled area, they will show whatever color you choose in the background of the header and content areas.
While DH provides the background for the header and DL the background of the bottom content area, the second panel here shows different colors by simply providing alternate inline styles for these two elements. An alternative to this last method is shown with the third box, which rather changes the background colors through a #id-style declaration (#box4blue).
<style>
dl {
width: 240px;
margin: 0;
padding: 0;
background: #ccc url(images/box4bottom.gif)
no-repeat bottom left;
line-height: normal;
}
dt {
font-weight:bold;
margin: 0 0 10px 0;
padding: 10px;
color: #fff;
border-bottom: 1px solid #fff;
background: #999 url(images/box4top.gif)
no-repeat top left;
}
dd {
margin: 0;
padding: 0 10px 10px 10px;
color: #666;
text-align: justify;
}
#box4blue dt { background-color: #69c; }
#box4blue { background-color: #9cf; }
</style>
<dl>
<dt>Lorem Ipsum</dt>
<dd>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</dd>
</dl>
<br/>
<dl style="background-color: #cf9;">
<dt style="background-color: #9c6;">Lorem Ipsum</dt>
<dd>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</dd>
</dl>
<br/>
<dl id="box4blue">
<dt>Lorem Ipsum</dt>
<dd>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</dd>
</dl>Another interesting approach uses one single image (the one below, which is actually wider) that can be dynamically adjusted to fit any size of content.
The original solution suggests using a JavaScript function, to be called immediately after the page loaded, that alters the styles of all "round" DIVs found in the document. However, this is not necessary, if you don't mind repeating a level of imbrication of some HTML elements.
The round effect is provided by split parts (corners) of the initial image.
<style>
.box16 .t, .box16 .b, .box16 .b b, .box16 .t b {
height: 10px;
background-image: url(images/box16.png);
}
.box16 .c {
background: #eeeeee;
border-color: #445566;
border-left-width: 4px;
border-right-width: 4px;
}
.round {
margin-bottom: 5px;
text-align: justify;
}
.round .c {
padding: 0 10px 0 10px;
border-top: 0;
border-bottom: 0;
border-style: solid;
}
.round .t, .round .b, .round .t b, .round .b b {
display: block;
overflow: hidden;
}
.round .t b, .round .b b {
float: right;
width: 50%;
}
.round .t .r {
background-position: top right;
}
.round .b .r {
background-position: bottom right;
}
.round .b {
background-position: bottom left;
}
.round .br {
clear: both;
display: block;
overflow: hidden;
height: 0;
}
</style>
<div class="round box16" style="width: 220px;">
<b class="t"><b class="r"></b></b><div
class="c"><b class="br"></b>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
<b class="br"></b></div><b
class="b"><b class="r"><!---->/b></b>
</div>There is also another very simple way to get round corners on a HTML block element. Unfortunately, this method is not supported by all browsers (especially by Internet Explorer). CSS3 styles like -moz-border-radius, -webkit-border-radius and border-radius (you can use only one of them, but we included all for compatibility with different browsers) add properly a round corner in Firefox and Safari, but are simply ignored and do nothing (yet) in Microsoft's Internet Explorer.
<div style="background-color: #EEEEEE;
width: 100%; padding: 10px; border: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The same stands for this header-content panel, with a gradient background image, that can be used in sidebars to display lists of commands or text-image content. In Firefox or other browsers you can see round corners (new styles -o-border-radius, -icab-border-radius, -khtml-border-radius, -moz-border-radius, -webkit-border-radius and border-radius) and maybe a shadow (new styles -webkit-box-shadow and -khtml-box-shadow), but not in Microsoft Explorer.
What is also interesting here: we have a UL-LI list-based panel. The content style is almost entirely defined by the LI element, and the header style by its nested H3 element. Such UL list contains usually a single LI element.
<style>
.box36 {
padding: 0;
margin: 0;
}
.box36 li {
width:100%;
padding: 5px;
background: url(images/box36.png)
bottom left repeat-x;
border: 1px solid #CFCFCF;
-o-border-radius: 9px;
-icab-border-radius: 9px;
-khtml-border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
-webkit-box-shadow: 2px 2px 2px #aaa;
-khtml-box-shadow: 2px 2px 2px #aaa;
margin-bottom: 20px;
list-style: none;
text-align: center;
line-height: normal;
}
.box36 h3 {
padding: 0 0 4px 0;
margin: 6px 10px 6px 10px;
border-bottom: 1px solid #d6d6d6;
font-size: 14px;
font-weight: bold;
color: #4C4C4C;
text-transform: lowercase;
text-align: left;
text-align: center;
}
</style>
<ul class="box36">
<li><h3>Lorem Ipsum</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</li>
</ul>Using similar techniques, you can obtain other kinds of fancy panels, such as the one below, used sometimes to render user comments. Top area should have round top corners, but they will not appear in Explorer, because we used the CSS3 technique described before, to define a top-right and a top-left radius (look at the box10 style declaration).
Lorem Ipsum
The middle fancy image is rendered by box10 style as well. The round corners at the bottom (which appear on any kind of browser) are obtained using typical DIV nesting the way described before, with corner images box10bottomright.gif and box10bottomleft.gif. The content can eventually use a box10spacer, to separate different areas:
<style>
.box10 {
background: #EEEEEE url(images/box10.gif)
no-repeat bottom left;
padding: 10px 10px 30px 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
position: relative;
line-height: normal;
}
.box10 h2 {
margin: 0px;
font-size: 12px;
font-weight: bold;
}
.box10middle {
padding: 10px 10px 0 10px;
BORDER-TOP: #bbbbbb 0px solid;
BORDER-RIGHT: #bbbbbb 1px solid;
BORDER-BOTTOM: #bbbbbb 0px solid;
BORDER-LEFT: #bbbbbb 1px solid;
background-COLOR: #ffffff;
text-align: left;
line-height: normal;
}
.box10middle .box10spacer {
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 10px;
}
.box10bottom {
background: url(images/box10bottomright.gif)
no-repeat bottom right;
}
.box10bottom div {
background: url(images/box10bottomleft.gif)
no-repeat bottom left;
}
.box10spacer {
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 20px;
BORDER-BOTTOM: #bbbbbb 1px dashed;
}
</style>
<div>
<div class="box10"><h2>Lorem Ipsum</h2></div>
<div class="box10middle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
<div class="box10spacer"></div>
sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
<div class="box10bottom"><div> </div></div>
</div>Reverse Engineer Panels from Web Sites
Chances are you already created your own web site, using a free template or some other template offered by your web design IDE. But we frequently discover on the web, often on someone else's site, some nifty and fancy panels we would love to incorporate in our own web site.
You can start by saving locally the full/complete web page with such a panel from your browser. What such command does is creating a local HTML page, with a folder with the same name that contains related elements, such as CSS files and images used within the page.
Most panels are static and crafted from small images and CSS styles or classes applied to HTML elements. What you need now to locate and separate, in order to create and design your own similar boxes, is:
- The block of HTML code that renders the panel. Just look at the source code from your browser and locate a certain sequence, that starts by some visible displayed text.
- Definition of CSS styles used with those HTML elements. Some elements may have inline style declarations, through style and other HTML element-specific attributes. But most web developers use separate CSS style definitions, either inline (within STYLE blocks declared in the same page), or more often in separate CSS files, declared in the header section of the page.
- Images used for the panels. These can appear as both IMG tags in the HTML sequence and in the CSS style definitions (look for the URL function).
While most techniques to create fancy web panels are not protected by copyright, try at least not to use the downloaded images as they are, especially if they look way too fancy and like they required a lot of work. Change your HTML and CSS, change the colors and try to not make it so obvious you used the same implementation as someone else.
Subscribe and Share: 
