rounded corners

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

rounded corners

Post by s.dot »

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?
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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

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
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

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

Post by alex.barylski »

Just tried some the other day:

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:

Post by nickvd »

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

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 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
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

nickvd wrote:The markup is ugly, I agree, however for the ease of implementation/maintanance..
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?

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:

Post by nickvd »

matthijs wrote:
nickvd wrote:The markup is ugly, I agree, however for the ease of implementation/maintanance..
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?

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.
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.

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 watched about 30 minutes of that accessibility video before i had to get some sleep, the rest should have downloaded by now and i fully intend to watch it, what little i saw was very very eye opening.
matt1019
Forum Contributor
Posts: 172
Joined: Thu Jul 06, 2006 6:41 pm

Post by matt1019 »

Hi All!!

My first post in Client Side (i think)

hmmm... one of the tool kits I saw on the net had this feature....

I believe they were:
Rico &
dojo

I like Rico verymuch by the way ;)

Hope this helps ya Scottayy

-Matt
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

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 think we have to seperate the two things: the use of rounded corners is one, the technique to make them another.

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>
That's 3 hooks. You only need 2 because you used a fixed width layout, so pick the ones you want.

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;
}
Isn't this much easier? No tables littered in your code. When it's time to replace those corners with something else, just change the 2 images or the rules in the css. You don't have to change the html on all your pages. So, depending on the way you have build your site, that's a change only in 1 css file and/or 2 images instead of tens or hundreds of html pages. And cleaner, more accessible code.
sansoo
Forum Commoner
Posts: 32
Joined: Mon Aug 14, 2006 5:33 pm
Location: Smallville

Post by sansoo »

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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

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.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

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 :evil:
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

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 :evil:
Sorry to hear that. Are you ok now? :)

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.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Ya much better now
Post Reply