Welcome here
Welcome to blah! And no tables, ma.
This example is slightly different from #8a. The anchor of the
right
border-image is at the top, the under part of this border is no img or real
border, but is filled with a blue background color (the rest of this bg
color is covered by the background color of the .inside class). The left
border image is positioned at the bottom, in the same way: above it the
background color is peeping through.
Easy vertically growing/shrinking box? Scale the font-size!
Smaller box, left sided? Same css! Enable javascript and click here! (back)
More text? Same css! Enable javascript and click here! (back)
Look ma: more text!
The anchor of the left border image is at the bottom. Now more text or
enlarging the font-size will stretch this box in such a way, that the top
right gradient is always on the same place, like the left gradient is always
at the bottom.
The top and bottom corners/borders are the old sliding doors: at the top the
left side is free (rather big margin-left of the right part), at the bottom
the opposite.
Everything is liquid on this box, so a fixed width design is possible too.
Just change the width-% of the box in px, and ready. - The box-container can
be placed everywhere: it behaves as a normal <div>.
Easy 3-step proces:
- Paint 3 small images (top & bottom corners/borders in 1 image of say 1000x30px; 1 left gradient border image, and 1 right gradient border image, both of say 2x160px); all together in this page: 4,2kB.
- Connect the liquid corners stylesheet (4kB).
- Adapt some height's and width's to the ones of your images.
Ad:
Don't buy me, I'm free!
* NO: tables * NO: javascript * NO: serverside script *
HOW DONE? 3 images; 1 css-file; some lines html
CSS IS THE MAGIC !
