Input on how best to create smooth rounded corners on images and what I have tried so far?
Permalink
I am trying to create the absolutely smoothest round corners on rectangle that I hope to use within an Add On for Concrete5 that I am in the beginning stages of developing and was wondering if any of you might be able to give me some input about how best to do this.
I mean I have read and read and tried all kinds of things already but have yet to discuss this with anyone and thought by posting it here that I might get some valuable input.
The best that I have tried so far can be seen athttp://www.carlosgonzalezconsulting.com/smooth-corners-test... (no I am not trying to get traffic to my site just presenting the best that I have come up with in an easily seen web page).
It would appear that the SVG rectangle at the bottom of the page is the best one (you will have to view the page in either Google Chrome or Chromium to see the SVG image as I have not yet embedded it in a more cross browser compatible manner so as to have it appear in other browsers) but that one still has a problem in that the corners are less thick than the rest of the rectangle outline (whereas the raster images produced by GIMP are too thick in the corners).
I might be able to increase the thickness of the corners in the SVG image through the application of filters or otherwise but as yet do not know how if anyone has any ideas.
The SVG image has other advantages to it's use like great scalability without pixelation so if I can work with SVG for this I think I will.
Any input on any of this with a view to creating the best round corners that can possibly be created would be appreciated.
Thanks.
Carlos
I mean I have read and read and tried all kinds of things already but have yet to discuss this with anyone and thought by posting it here that I might get some valuable input.
The best that I have tried so far can be seen athttp://www.carlosgonzalezconsulting.com/smooth-corners-test... (no I am not trying to get traffic to my site just presenting the best that I have come up with in an easily seen web page).
It would appear that the SVG rectangle at the bottom of the page is the best one (you will have to view the page in either Google Chrome or Chromium to see the SVG image as I have not yet embedded it in a more cross browser compatible manner so as to have it appear in other browsers) but that one still has a problem in that the corners are less thick than the rest of the rectangle outline (whereas the raster images produced by GIMP are too thick in the corners).
I might be able to increase the thickness of the corners in the SVG image through the application of filters or otherwise but as yet do not know how if anyone has any ideas.
The SVG image has other advantages to it's use like great scalability without pixelation so if I can work with SVG for this I think I will.
Any input on any of this with a view to creating the best round corners that can possibly be created would be appreciated.
Thanks.
Carlos
I use CSS. Sure, it's not valid in all browsers, but a higher percentage support it everyday, and the site is still usable if it's not supported.
I appreciate the input jshannon but I absolutely must have IE compatibility as that browser (with all it's versions) still has a huge user base.
Rounded corners is a must on various aspects of our websites (at least with respect to looking modern and so forth) these days and being compatible with IE is also a must.
I assume you meant CSS extensions that are particular to particular browsers to create rounded corners.
While I won't use that I was thinking last night that all such CSS extensions use calculated values (like SVG does) to create the nice rounded corners. I will have to look into how a browser might do that so that I can figure out if I can imitate the same nice round corners using SVG XML.
Or perhaps do it through Flash (readily available for most IE versions).
There is also a library in PHP that creates graphic images on the fly, again using calculated values. I'll have to play around with that too.
Anyway thanks for your input.
Carlos
Rounded corners is a must on various aspects of our websites (at least with respect to looking modern and so forth) these days and being compatible with IE is also a must.
I assume you meant CSS extensions that are particular to particular browsers to create rounded corners.
While I won't use that I was thinking last night that all such CSS extensions use calculated values (like SVG does) to create the nice rounded corners. I will have to look into how a browser might do that so that I can figure out if I can imitate the same nice round corners using SVG XML.
Or perhaps do it through Flash (readily available for most IE versions).
There is also a library in PHP that creates graphic images on the fly, again using calculated values. I'll have to play around with that too.
Anyway thanks for your input.
Carlos
Way late, and you've probably resolved it.
But, I use an add-on library that addresses a number of CSS3 behaviors. That is CSS3-PIE.http://css3pie.com/
Rounded corners, gradients, multiple background images, RGBA (255 levels of transparency) and others.
Integrates well with C5 -- proper pathing and location of the .htc & .php files are key.
But, I use an add-on library that addresses a number of CSS3 behaviors. That is CSS3-PIE.http://css3pie.com/
Rounded corners, gradients, multiple background images, RGBA (255 levels of transparency) and others.
Integrates well with C5 -- proper pathing and location of the .htc & .php files are key.
