| home / programming / css_borders / 1 |    [previous][next] |
|
|
|
The xhtml will be the same as in example 1:
<div class="serif"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="boxcontent"> <h1>Example 2</h1> <p>Corners to give a serif effect.</p> </div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </div>
and the styling, after condensing, will be:
/* flared serif */
.serif {
background: transparent; width:40%;
}
.serif h1, .serif p {
margin:0 10px;
}
.serif h1 {
font-size:2em; color:#fff;
}
.serif p {
padding-bottom:0.5em;
}
.serif .b1, .serif .b2, .serif .b3, .serif .b4 {
display:block;
overflow:hidden;
font-size:1px;
}
.serif .b1, .serif .b2, .serif .b3 {
height:1px;
}
.serif .b2, .serif .b3 {
background:#fc0;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.serif .b4 {
background:#fc0;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.serif .b1 {
margin:0; background:#fff;
}
.serif .b2 {
margin:0 1px;
border-width:0 2px;
}
.serif .b3 {
margin:0 3px;
}
.serif .b4 {
height:2px;
margin:0 4px;
}
.serif .boxcontent {
display:block;
background:#fc0;
border-left:1px solid #fff;
border-right:1px solid #fff;
margin:0 5px;
}
This example has a plinth top and bottom to create the effect of a pillar and the enlarged view below shows how this is achieved. Note that the curve is made up of five lines but the second and fourth lines have the same style.
The XHTML is below:
<div class="pillar"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b> <div class="boxcontent"> <h1>Example 3</h1> <p>Corners to give a rounded pillar effect.</p> </div> <b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </div>
and the styling, after condensing, will be:
/* Pillar type */
.pillar {
background:transparent;
width:40%;
}
.pillar h1, .pillar p {
margin:0 10px;
}
.pillar h1 {
font-size:2em;
color:#fff;
}
.pillar p {
padding-bottom:0.5em;
}
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {
display:block;
overflow:hidden;
font-size:1px;
}
.pillar .b1, .pillar .b2, .pillar .b4 {
height:1px;
}
.pillar .b2, .pillar .b3 {
background:#d66;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.pillar .b4 {
background:#d66;
border-left:4px solid #fff;
border-right:4px solid #fff;
}
.pillar .b1 {
margin:0 2px;
background:#fff;
}
.pillar .b2 {
margin:0 1px;
border-width:0 1px;
}
.pillar .b3 {
height:2px;
margin:0;
}
.pillar .b4 {
margin:0 2px;
}
.pillar .boxcontent {
display:block;
background:#d66;
border-left:1px solid #fff;
border-right:1px solid #fff;
margin:0 5px;
}
The above examples all have a flat look to them, but with small changes to the border colors it is possible to obtain a 3D effect. Example 4 is based on the standard curved border but has a raised 3D appearance using 5 shades of grey (grey 1 to grey 5) and white. This method works equally as well with 5 shades of pastel colors.
You will notice that this example requires different styles to be applied to the bottom set of lines.
The XHTML is below:
<div class="raised"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="boxcontent"> <h1>Example 4</h1> <p>Rounded corners with raised borders</p> </div> <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b> </div>
and the styling, after condensing, will be:
.raised {
background:transparent;
width:40%;
}
.raised h1, .raised p {
margin:0 10px;
}
.raised h1 {
font-size:2em;
color:#fff;
}
.raised p {
padding-bottom:0.5em;
}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {
display:block;
overflow:hidden;
font-size:1px;
}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {
height:1px;
}
.raised .b2 {
background:#ccc;
border-left:1px solid #fff;
border-right:1px solid #eee;
}
.raised .b3 {
background:#ccc;
border-left:1px solid #fff;
border-right:1px solid #ddd;
}
.raised .b4 {
background:#ccc;
border-left:1px solid #fff;
border-right:1px solid #aaa;
}
.raised .b4b {
background:#ccc;
border-left:1px solid #eee;
border-right:1px solid #999;
}
.raised .b3b {
background:#ccc;
border-left:1px solid #ddd;
border-right:1px solid #999;
}
.raised .b2b {
background:#ccc;
border-left:1px solid #aaa;
border-right:1px solid #999;
}
.raised .b1 {
margin:0 5px;
background:#fff;
}
.raised .b2, .raised .b2b {
margin:0 3px;
border-width:0 2px;
}
.raised .b3, .raised .b3b {
margin:0 2px;
}
.raised .b4, .raised .b4b {
height:2px; margin:0 1px;
}
.raised .b1b {
margin:0 5px; background:#999;
}
.raised .boxcontent {
display:block;
background:#ccc;
border-left:1px solid #fff;
border-right:1px solid #999;
}
I will leave the style in this form to make it easier to see how it is done, but it's possible to condense it even further.
| home / programming / css_borders / 1 | [previous][next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: May 25, 2005
URL: http://webreference.com/programming/css_borders/1
