Ok, so this is a problem that has been nagging me for a while and I've seen a few good and bad solutions to it. But what is the best solution, and what is the pitfalls, drawbacks and big "No, Nos".
What I want is to create dynamic, flexible DIV-blocks with a custom graphical border. For example a DIV-box with shadows, but not necessarily shadows.
UPDATED: As, @Jeroen stated bellow in a comment, I am not only asking for "the best way to make shadows". Any crazy custom graphical border.
I know there are some solutions with CSS3 (box-shadow
, border-image
and border-radius
), but it is not 100% cross-browser, specially not if you have to work with one or two versions old browsers.
Example image of what i want to achieve:
or
The example above is actually done with one method I use frequently. It does the job and it does meet all the requirements.
- It adapts to different sized DIV-blocks.
- It uses custom graphics.
- It works cross-browser and versions.
- It is pretty easy and fast to apply.
- It is JavaScript free, 100% CSS/HTML.
...but of course there are a few cons:
- It requires 8 images.
- It requires 8 extra DIV-blocks with no real content.
- Not very pretty in the source.
HTML DIV-block example:
<div class="flowBox">
<h1>Header 1</h1>
Vivamus tincidun...
<div class="border_t"></div>
<div class="border_b"></div>
<div class="border_l"></div>
<div class="border_r"></div>
<div class="border_br"></div>
<div class="border_bl"></div>
<div class="border_tr"></div>
<div class="border_tl"></div>
</div>
CSS example:
<style type="text/css">
<!--
.flowBox {
background:#FFFFFF;
margin:10px;
float:left;
padding:10px;
width:250px;
position:relative;
}
.border_t {
background:url(border_t.png) repeat-x;
position:absolute;
top:-2px; left:0;
width:100%;
height:2px;
}
.border_b {
background:url(border_b.png) repeat-x;
position:absolute;
bottom:-6px; left:0;
width:100%;
height:6px;
}
.border_l {
background:url(border_l.png) repeat-y;
position:absolute;
top:0; left:-3px;
width:3px;
height:100%;
}
.border_r {
background:url(border_r.png) repeat-y;
position:absolute;
top:0; right:-6px;
width:6px;
height:100%;
}
.border_br {
background:url(border_br.png);
position:absolute;
bottom:-6px; right:-6px;
width:6px;
height:6px;
}
.border_bl {
background:url(border_bl.png);
position:absolute;
bottom:-6px; left:-3px;
width:3px;
height:6px;
}
.border_tr {
background:url(border_tr.png);
position:absolute;
top:-2px; right:-5px;
width:5px;
height:2px;
}
.border_tl {
background:url(border_tl.png);
position:absolute;
top:-2px; left:-2px;
width:2px;
height:2px;
}
-->
</style>
As you can see, it perhaps isn't an optimal solution. But is there a better way?
UPDATED: There is support for shadows in most browsers and versions, even if it is not one standard. Source using css-shadow: http://pastebin.com/LZHUQRW9 But my question relates not only to shadows.
Full source code: http://pastebin.com/wxFS2PHr