Re: [css-d] What is a simple alternative to JS+CSS rounded corners
At 8:50 PM -0500 12/27/06, Parag Jagdale wrote: 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? The width can be fixed or not. See: http://sperling.com/examples/box/ Perhaps that might work for you. hth's tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ 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/
Re: [css-d] What is a simple alternative to JS+CSS rounded corners
Richard Herrera wrote: [...]I think you're being too paranoid. Javascript for presentation is one of the most unobtrusive things you can do with the language. And I hardly think the tiny bit of JS required even qualifies as bandwidth. Unless you're talking about a specific solution. A quickie script ( test case): [...] You get the gist. I don't even think that JS adds up to 1kb. Hi Parag, Richard's script is giving as generated html: div id=element ptest/p span class=corner topLeft/span span class=corner topRight/span span class=corner bottomLeft/span span class=corner bottomRight/span /div * See testpage http://home.tiscali.nl/developerscorner/css-discuss/test-cornerscript.htm So this script is working as a method to put the span's in the html, with an alternative css way for getting some smaller corner images on the right places (for painted borders some extra's are needed). * Comparing: the script is about 12 lines of code, and adding the span's directly in the html is 4 lines of code. I should say: no real advantage for the script, it's only delaying the download time (though not very much), and if javascript is turned off client side, the visitor doesn't see the corners. - My interpretation of the question was using an image replacing javascript, which is drawing the corners (pixel by pixel) on the fly. * Like the Nifty Cube javascript method http://www.html.it/articoli/niftycube/index.html In that way, indeed quite some javascript exercitions are applied. In a quick view, the needed niftycube.js is about 9kB. * Comparing: the combined top-foot image in my example is 2.4kB and the middle gif is 108bytes. If you combine them with other background images in the page, you can save the 2 http-requests to get them (and save the packet filling empty space), and use even less bandwith for downloading. And for me the most important reason to use css + images (apart from the js not enabled problem): you have total freedom about what is displayed on screen (the shadowing etc. like you mentioned). :-) As Tedd said already, a flexible width (self adapting to the surrounding box) is possible as well: no problem! Some more liquid examples you can find in: * Liquid Corners Playgarden http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-index.htm * Liquid Corners (and Borders) article http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm * The Gap Safe Alternative http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners-gapsaver.htm I should go for the css + images method! [You guessed this already, I suppose ;-) ] Succes and greetings, francky __ 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/
Re: [css-d] What is a simple alternative to JS+CSS rounded corners
franky, You're right. If the example is used once, there really is no benefit to using the script over just using markup. However, if you're applying the corners to multiple elements, well, now you're talkin'. (The script could easily be modified to work by class name, multiple elements, etc...) # of lines of script, one element: 12 # of lines of markup, one element: 4 # of lines of script, 10 elements: 12 # of lines of markup, 10 elements: 40 As for no javascript = no corners, the corners are superfluous anyway. It won't hurt the site's usability, which is a key factor in unobtrusive javascript use. On Dec 28, 2006, at 11:56 AM, francky wrote: So this script is working as a method to put the span's in the html, with an alternative css way for getting some smaller corner images on the right places (for painted borders some extra's are needed). * Comparing: the script is about 12 lines of code, and adding the span's directly in the html is 4 lines of code. __ 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/
Re: [css-d] What is a simple alternative to JS+CSS rounded corners
Richard Herrera wrote: franky, You're right. If the example is used once, there really is no benefit to using the script over just using markup. However, if you're applying the corners to multiple elements, well, now you're talkin'. (The script could easily be modified to work by class name, multiple elements, etc...) # of lines of script, one element: 12 # of lines of markup, one element: 4 # of lines of script, 10 elements: 12 # of lines of markup, 10 elements: 40 As for no javascript = no corners, the corners are superfluous anyway. It won't hurt the site's usability, which is a key factor in unobtrusive javascript use. Hi Richard, You're right too. For heavy cornering pages [1] a javascript to implement the span's or div's can be easy for writing the code, and can save markup-lines. On the other hand, if there are elements with slightly different corners/borders, the script has to be extended, while with the extra html-lines it's just the use of an other class to get (or easy change) the used images/borders. But also that is possible by script. If we make a function of the amount of coding characters for the script and for the markup way in a special case (in relation to the download time of each), somewhere will be the break even point, and we can make the decision depending on what side of the graphic we are. :-) - And indeed, the usability isn't hurt by disabling js. So I think it's up to the developer's (or client's) taste what is wanted: a site which is always the same looking, script or noscript or not. Oh, I almost forgot the alternative of serverside scripting. [2] If for instance php is possible, then in the html some php-includes can replace the repeating lines. Then the javascipt disabled problem isn't occurring, and the 40 markup lines only have to be 10 lines. Can be done by shtml too, I think. Greetings a good 2007! francky [1] Or for adding corners to an existing page, without changing the html. [2] The download speed will be the same as the complete html way, but the html code of the page is cleaner. __ 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/
Re: [css-d] What is a simple alternative to JS+CSS rounded corners
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]
[css-d] What is a simple alternative to JS+CSS rounded corners
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/
Re: [css-d] What is a simple alternative to JS+CSS rounded corners
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]
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/
Re: [css-d] What is a simple alternative to JS+CSS rounded corners
I think you're being too paranoid. Javascript for presentation is one
of the most unobtrusive things you can do with the language. And I
hardly think the tiny bit of JS required even qualifies as bandwidth.
Unless you're talking about a specific solution. A quickie script (
test case):
var RoundedCorners = function() {
var element = document.getElementById(element);
var topLeft, topRight, bottomLeft, bottomRight;
var classArray = [topLeft, topRight, bottomLeft, bottomRight];
var classNameArray = [topLeft, topRight, bottomLeft,
bottomRight];
for (var i = 0; i classArray.length; i++) {
classArray[i] = document.createElement(span);
classArray[i].className = corner + classNameArray[i];
element.appendChild(classArray[i]);
}
};
window.onload = function() {
RoundedCorners();
};
#element {
display: block;
width: 100px;
height: 100px;
position: relative;
background: blue;
}
.corner {
display: block;
position: absolute;
width: 10px;
height: 10px;
background: red;
}
.topLeft {
top: 0;
left: 0;
}
.topRight {
top: 0;
right: 0;
}
.bottomLeft {
bottom: 0;
left: 0;
}
.bottomRight {
bottom: 0;
right: 0;
}
div id=element
ptest/p
/div
You get the gist. I don't even think that JS adds up to 1kb.
On Dec 27, 2006, at 1:01 PM, Parag Jagdale 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/
__
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/
Re: [css-d] What is a simple alternative to JS+CSS rounded corners
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]
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/
__
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 --
