Doesn't use images or JS:
http://www.spiffycorners.com/sc.php?sc=spiffybg=fffg=0a67e6
Uses images, but no JS:
http://www.albin.net/CSS/roundedCorners/examples.html
Please let me know if these work out for you. I considered them, but
eventually choose Nifty.
--jon
On 12/27/06, Parag Jagdale [EMAIL PROTECTED] wrote:
Thank you for your replies.
Yes, i was talking about NiftyCorners with sytanx that i briefly saw
looked like this:
Rounded(div.box_3_1_T,top,transparent,#8BBDF7);
Rounded(div.box_3_1_T,bottom,transparent,#CFE2F8);
Rounded(div.box_3_2_T,top,transparent,#4799E6);
Rounded(div.box_3_2_T,bottom,transparent,#B6D7F7);
Rounded(div.box_3_3_T,top,transparent,#306799);
Rounded(div.box_3_3_T,bottom,transparent,#7EB2E1);
I want to avoid that.
The following is what I have implemented with my method:
http://test.un-identified.com/misc_images/roundedCorners.html
I want to come up with something like that, but i dont believe a JS
solution will give me such shadowed borders...point me in the right
direction if there is such a method which uses images!
See how I have freedom with images and shadows in phtosohop, and I am
limited only by the fact that the width must be fixed?
On 12/27/06, Stephan Wehner [EMAIL PROTECTED] wrote:
On 12/27/06, Parag Jagdale [EMAIL PROTECTED] wrote:
So the company I am working for suggests the use of one of the
Javascript+CSS rounded corners solutions. But I myself do not believe
in using Javascript for pure presentation, and I believe that
sacrificing the bandwidth to load all this JS is not worth the
benefit.
On the other hand, the solution I currently have is also a little
complex and heavy. It uses 3 images and 3 DIV layers. The header and
footer images in total probably take more bandwidth than the JS in the
other solution. The benefit I see in this solution is that there is no
3rd party (no JS to worry about). There are only DIV layers and CSS
classes that are already defined, so no JS is involved in
presentation.
Another benefit is that I can give the boxes any type of shadowing and
patterns in Photoshop to make the style of the boxes match the rest of
the site.
What do you think?
div class=portalBox
div class=portalBox_headSearch Colleges/div
/div
div class=portalBox_foot/div
portalBox: is a vertically repeating image
portalBox_head: a fixed width and height rectangle which has a non
repeating image with the top left and right corners rounded
portalBox_foot: a fixed width and height rectangle which has a non
repeating image with the bottom left and right corners rounded
div.portalBox{
float:left;
width: 524px;
text-align:left;
background-image: url(../images/portals/portalBox_blue_re.jpg);
background-repeat: repeat-y;
}
div.portalBox_head{
width: 524px;
height: 25px;
float:left;
background-image: url(../images/portals/portalBox_blue_head.jpg);
background-repeat: no-repeat;
text-align:left;
font-size:14px;
font-weight: bold;
color: #333;
padding: 0.6em 1em;
margin:0;
}
div.portalBox_foot{
float:left;
width: 524px;
height: 12px;
background-image: url(../images/portals/portalBox_blue_foot.jpg);
background-repeat: no-repeat;
}
What I want to know is am i just being stubborn about not using an
easier solution(The JS), or am I right saying that the solution is too
complex and no JS should be involved?
If there is a better no JS solution, im all ears!
Thank You,
Parag Jagdale
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
When I came across this problem I thought, just look at what the
javascript does, and use that directly: it manipulates the DOM and
inserts spans and divs, as far as I remember. These have classes which
produce the appearance of rounded corners.
I don't know how this would compare to what you have assembled.
In general, I don't think it is wise to let the page appear
differently when javascript is turned off.
If you are generating the page with PHP, or Rails, or Java, etc. a
helper method could do the rounding on the server side, instead of
the browser.
Stephan
--
Stephan Wehner
http://stephan.sugarmotor.org
http://stephansmap.org
http://www.trafficlife.com
http://www.buckmaster.ca
__
css-discuss [EMAIL PROTECTED]
