Rounded CSS Boxes Explained
This is a short explanation of how I achieved the rounded boxes in the menu on my front page, in case you were wondering how it was done.
First, there's a few lines of Javascript you need to have in the head of your document:
<script type/text="Javascript">
function drawcurve(n,end,ht)
{
var n;
var end;
var ht;
var csize;
for (n = n; n <= end; n++)
{
document.write("<div id='border' style='color:#FFFFFF;font-size:" + csize + "px;top:" + ht + "px;left:" + n + "px;position:absolute;z-index:-1;';>.;</div;>");
}
}
</script>
It's a pretty basic Javascript function. I'll break it down one line at a time:
All that line does is tell the browser to get ready for some Javascript in the header.
function drawcurve(n,end,ht,csize)
This names the function
drawcurve and tells the browser that it has three variables:
n,
end, and
ht.
n tells the browser where to start drawing.
end tells the browser where to stop.
ht is the vertical orientation (height) on the page.
csize is the font size of the period (controling the size of the circle).
Now, we get to the equations of the function:
for (n = n; n <= end; n++)
This is the start of the for loop. It sets n to "n" (i.e., whatever is specified in the parameters for n, and then says, while n is less than or equal to end, increase n by 1. Then you've got the curly brace:
{
and then:
document.write("<div id='border' style='color:#FFFFFF;font-size:300px;top:" + ht + "px;left:" + n + "px;position:absolute;z-index:-1;'>.</div>");
That's the meat of it. What this does, is it writes on the page:
<div id="border" style="color:FFFFFF;font-size:300px;top:(ht)px;left:(n)px;position:absolute;z-index:-1;">.</div>
This puts a huge period wherever you specify (the
n and
ht parameters). The process will be repeated however many times you need it (specified by
end).
Please
e-mail me and let me know what you think of this solution, or if you've come up with others of your own!