rounded corners
Moderator: General Moderators
rounded corners
Bahhh sorry to keep posting about CSS. It's just becoming really tricky for me. Like learning Spanish. I failed Spanish class.
Aha. Anyways, is using JavaScript for rounded corners an acceptable solution? Some of the nicest codes I've seen made use of a JS function or two.
I don't like using images.. that gets tricky.
Are there any non-image, non-javascript solutions?
Aha. Anyways, is using JavaScript for rounded corners an acceptable solution? Some of the nicest codes I've seen made use of a JS function or two.
I don't like using images.. that gets tricky.
Are there any non-image, non-javascript solutions?
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
- feyd
- Neighborhood Spidermoddy
- Posts: 31559
- Joined: Mon Mar 29, 2004 3:24 pm
- Location: Bothell, Washington, USA
There are a few solutions involving purely CSS, but IE won't do them. Mozilla has their own rounded corners extension.. CSS3 has rounded corners in the spec, I think.
Found this, seems interesting: http://css-discuss.incutio.com/?page=RoundedCorners
Found this, seems interesting: http://css-discuss.incutio.com/?page=RoundedCorners
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Try a list apart. They a bunch of rounded corner tutorials. So does sitepoint. Few do not involve images or JS though.
-
alex.barylski
- DevNet Evangelist
- Posts: 6267
- Joined: Tue Dec 21, 2004 5:00 pm
- Location: Winnipeg
Just tried some the other day:
http://www.html.it/articoli/nifty/index.html worked well and didn't use images...
http://www.html.it/articoli/nifty/index.html worked well and didn't use images...
-
nickvd
- DevNet Resident
- Posts: 1027
- Joined: Thu Mar 10, 2005 5:27 pm
- Location: Southern Ontario
- Contact:
I've used nifty corners in the past, I loved the flexibility of being able to generate almost any corner style you can think of, but I just couldn't get past the "flicker" of the un-styled content while the javascript is going about it's work. (granted, I am only using a p3 933 at the office)
I've been searching for the be-all, end-all rounded corner solution for a loooong time now... I've gotten to the point where, I'd rather suffer the humiliation of using tables* in my pages then deal with 8+ useless div's, or 10kb worth of cross browser css hacks... A simple 3x3 table is all that's needed for a rounded content box
The css for this approach is 100% cross browser and usually less than a quarter of the css required for css/image based solutions.
The markup is ugly, I agree, however for the ease of implementation/maintanance (use a small php function to spit out the box if you are using alot of them) I personally feel that it's worth the trade off, 'instant' loading, cross-browser, and (afaik) accessible.
*: strictly for rounded corners, the rest of the page is css, except for pixel sensitive, graphical layouts
I've been searching for the be-all, end-all rounded corner solution for a loooong time now... I've gotten to the point where, I'd rather suffer the humiliation of using tables* in my pages then deal with 8+ useless div's, or 10kb worth of cross browser css hacks... A simple 3x3 table is all that's needed for a rounded content box
Code: Select all
<table><tr><td class='tl'></td><td class='tm'></td><td class='tr'></td></tr>
<tr><td class='ls'></td><td class='cnt'>
Content Goes here...
</td><td class='rs'></td></tr>
<tr><td class='bl'></td><td class='bm'></td><td class='br'></td></tr></table>The markup is ugly, I agree, however for the ease of implementation/maintanance (use a small php function to spit out the box if you are using alot of them) I personally feel that it's worth the trade off, 'instant' loading, cross-browser, and (afaik) accessible.
*: strictly for rounded corners, the rest of the page is css, except for pixel sensitive, graphical layouts
I would have to disagree here. Ease of implementation/maintanance? Looking at all that code already gets a headache coming... And that for every box on a page? What if you decide to change the design next year?nickvd wrote:The markup is ugly, I agree, however for the ease of implementation/maintanance..
I know this is purely personal and very subjective, but I can't understand how people find table's easy. It makes the code so messy and hard to follow. Only when stricty necessary (displaying some tabular data) will I use a table.
And anyone who wants to know how it is for a blind user to surf different webpages (and dealing with meaningless tables or bad code for example) must check out the impressive presentation of Darren Fittler at webstock06.
For most rounded corners the code is already present in the existing HTML. Like <div id="menu"><h2>Header</h2>... In a fixed width site those 2 are enough for every round corner you imagine. In flexible layouts, well you'll have to be a bit more creative. Maybe, maybe add one - nonsemantic- div or span in the box.
-
nickvd
- DevNet Resident
- Posts: 1027
- Joined: Thu Mar 10, 2005 5:27 pm
- Location: Southern Ontario
- Contact:
Please don't misunderstand me, I am in 100% agreement with you. I recommend against rounded corners all the time, but some clients just refuse to listen and demand them, so I feel that using a single, perhaps two tables strictly for rounded corners is much easier than fussing with any and all the other techniques out there. I just got finished on a sample layout for a client: ( http://imfinancial.net/test/rentorbuy.html valid xhtml1.0 strict, valid css) Perhaps it's just me, but having two (and only two) small tables to make life easier is worth it, and not hard to comprehend at all.matthijs wrote:I would have to disagree here. Ease of implementation/maintanance? Looking at all that code already gets a headache coming... And that for every box on a page? What if you decide to change the design next year?nickvd wrote:The markup is ugly, I agree, however for the ease of implementation/maintanance..
I know this is purely personal and very subjective, but I can't understand how people find table's easy. It makes the code so messy and hard to follow. Only when stricty necessary (displaying some tabular data) will I use a table.
And anyone who wants to know how it is for a blind user to surf different webpages (and dealing with meaningless tables or bad code for example) must check out the impressive presentation of Darren Fittler at webstock06.
For most rounded corners the code is already present in the existing HTML. Like <div id="menu"><h2>Header</h2>... In a fixed width site those 2 are enough for every round corner you imagine. In flexible layouts, well you'll have to be a bit more creative. Maybe, maybe add one - nonsemantic- div or span in the box.
As for updating the layout a year later, Show me any rounded corner technique that wouldnt require any extra work that the table method wouldnt take (either remove the table to get rid of the rounded corners [you could even just remove the css to get rid of the images] or alter the image(s) to change the look of the box, no markup/css needs to be changed)
Code: Select all
.contBox {border-collapse:collapse;width: 100%;}
.contBox .tl {background: url(../images/tl.png) no-repeat;}
.contBox .tr {background: url(../images/tr.png) no-repeat;}
.contBox .bl {background: url(../images/bl.png) no-repeat;}
.contBox .br {background: url(../images/br.png) no-repeat;}
.contBox .left {background: url(../images/left.png) repeat-y;}
.contBox .right {background: url(../images/right.png) repeat-y;}
.contBox .top {background: url(../images/top.png) repeat-x;}
.contBox .bot {background: url(../images/bot.png) repeat-x;}
.contBox .tl, .contBox .tr, .contBox .bl, .contBox .br {width: 25px;height:25px;}
.contBox .tl, .contBox .bl, .contBox .left {width:23px;}
.contBox .boxCont {background: #ECECEC;color:black;}I think we have to seperate the two things: the use of rounded corners is one, the technique to make them another.Please don't misunderstand me, I am in 100% agreement with you. I recommend against rounded corners all the time, but some clients just refuse to listen and demand them, so I feel that using a single, perhaps two tables strictly for rounded corners is much easier than fussing with any and all the other techniques out there.
I don't have anything against rounded corners and hope I didn't make that impression. But that's a question for another thread in the graphics section.
The point I tried to make is the technique. The html/css. Take your example page. I can completely remove the tables you used for the rounded corners. They are not necessary. Only thing what's needed in you example: 2 images, 2 rules in your css. That's it.
Look at your code. How many "hooks" do you have to "attach" your corners to, after removing the tables:
Code: Select all
<div id="menu">
<h1>.: Navigation :.</h1>
<ul id="navlist">
<li>...</li>
...
</ul>
</div>Code: Select all
#menu {
background: #fff url(images/bigroundedcornerboxforthebottomandmiddlepart.gif) no-repeat bottom left;
padding-bottom:10px;
}
#menu h1 {
background: transparent url(images/smallroundedcornerboxforthetoppart.gif) no-repeat top left;
padding-top:10px;
}I like the solution using css for round corners you have there. But thats only going to work in a fixed width scenario.
And i agree for the most part about not using tables in your designs at all. I use them more than i should probably, but its only for sctructuring forms and there output in a nice superclean fashion. I know this can be done in CSS but i get lazy sometimes and just keep recyclying one of the form templates i built long ago.
But on the rounded corners subject again. For a fluid design are you not right back to the arguement at hand? Until we can start through vector based images around on the web or MS pulls its head out of its ass we are limited to very vew options for Rounded corners.
I must say i liked the Table idea better than four small corner images i have to keep track of and place properly with css.
And i agree for the most part about not using tables in your designs at all. I use them more than i should probably, but its only for sctructuring forms and there output in a nice superclean fashion. I know this can be done in CSS but i get lazy sometimes and just keep recyclying one of the form templates i built long ago.
But on the rounded corners subject again. For a fluid design are you not right back to the arguement at hand? Until we can start through vector based images around on the web or MS pulls its head out of its ass we are limited to very vew options for Rounded corners.
I must say i liked the Table idea better than four small corner images i have to keep track of and place properly with css.
For a fluid scenario you need 1 more hook. So at most that means 1 useless div or span somewere. Fluid layouts may create other challenges (IE, box-models, floats, etc) so maybe that extra hook is already there for other reasons.
We can argue about this forever, but it's just that I would personally never sacrifice the quality of my code/website because something is a bit difficult to implement. Certainly not for a client's website.
We can argue about this forever, but it's just that I would personally never sacrifice the quality of my code/website because something is a bit difficult to implement. Certainly not for a client's website.
Sorry to hear that. Are you ok now?astions wrote:I just had to make rounded corners on a box that has a gradient background and a variable height and width... that was a pain
In a situation like that I might use one image for both corners and gradient background. The image is somewhat bigger in filesize, but downloading one background image (which is cached) is faster then a few smaller ones. Of course, again, in a fluid box this will be more difficult.