Transparent Rounded Corners Box
This is the second version of the rounded corners box model. But this model
is special as it has transparent corners allowing it to be placed on
any background without tweaking the graphic.
Expandable Box
This box can expand in any direction without the need to create new graphics. The box is created from one .png graphic with rounded corners and transparent edges. This allows the box to be placed over any background without seeing square corners. As an example, the box flows over into the red right column with the same look as when it is on the center column.
Furthermore, the width of the box can be adjusted using javascript. Give it a try.
 |
Click to change the width. |  |
The first model was designed with the same concept of one image and expandability. However, the first model was limited in that the background was limited to non-transparent images such as a .jpg graphic. This means that the graphic would have to be changed whenever the box was placed on a background of a different color.
HTML
<div class="onebox_container">
<div class="onebox_content_ur">
<div class="onebox_ul"></div><!-- close onebox_ul -->
<h3>Expandable Box</h3>
<p>This box can expand in any direction without the need to create new graphics. The box is created from... </p>
</div> <!-- close onebox_content_ur -->
<div class="onebox_lr">
<div class="onebox_ll"></div><!-- close onebox_ll class div -->
</div><!-- close onebox_lr --></div><!-- close onebox_container -->
Style
.onebox_content_ur, .onebox_ul, .onebox_lr, .onebox_ll {
background-position: top right;
background-attachment: scroll;
background-image: url(images/box.png);
}
.onebox_container {
width:540px;
padding-left:30px; /* this returns the box to the original position since the left margins are set to negative */
margin:auto; /* centers box */
}
.onebox_content_ur {
padding:1px 20px 0 0; /* Hack to keep content off edges of background */
position:relative;
}
.onebox_ul {
background-position: top left;
margin-left:-30px;
height:100%;
width:30px;
position:absolute;
left:0;
top:0;
}
.onebox_lr {
background-position:bottom right;
width: 100%;
height:40px;
position:relative;
}
.onebox_ll {
background-position: bottom left;
margin-left:-30px;
height:40px;
width:30px;
position:relative;
}