Finediv is a PHP solution to show boxes with rounded corners using css and only one image.
The image is about 1k in GIF format. Cross Browser compatible. NO JAVASCRIPT needed. Simply HTML and CSS.
The boxes may have a border. Using the GIF format, the background part of the rounded
corners are transparent, allowing to scroll the box over a fixed background.
The approach is rather complex, there are several steps to follow:
- Draw a very wide, two times radius high image with rounded corners
- Make a style sheet for this box. Every style sheet is different, depending on corner radius, border width and colors.
- Connect the style sheet to your pages
- Draw the box
What does the install routine FineDiv::install() do?
- It gives a name to the image and the stylesheet. This name is an ugly md5 hash over the attributes of the image. If you change any of the class attributes, the resulting md5 name for the image will change.
- It includes the css file into the page using a <link> - tag.
- It tests if the md5 named image file already exists.
- If the image already exists, then it does nothing else.
- If the file does not exist yet, then
- Creates the image and saves it.
At the moment the result is far from being perfect and should be reworked by hand for quality websites.( see the lower left curves ) - Creates the style sheet and saves it
- Creates the image and saves it.
How does the resulting HTML Code look like?
...
<div class="bfa3f616f58cee66a666875820542c19-top-left"></div><div class="bfa3f616f58cee66a666875820542c19-top-right"></div>
<div class="bfa3f616f58cee66a666875820542c19-inside">
<p class="bfa3f616f58cee66a666875820542c19-notopgap">Your text & other things inside</p>
...
<p class="bfa3f616f58cee66a666875820542c19-nobottomgap">...</p>
</div>
<div class="bfa3f616f58cee66a666875820542c19-bottom-left"></div><div class="bfa3f616f58cee66a666875820542c19-bottom-right"></div>
...
