Page: 1, 2  Next

neat rounded, "nifty corners" no images needed!
mike
Status: Contributor
Joined: 08 Oct 2004
Posts: 71
Reply Quote
I believe I showed one of you this through e-mail a while back. Using css and a little bit of javascript this technique will allow you to apply rounded corners across browser platforms.

Nifty Corners

I've tested it pretty well and it degrades nicely with javascript turned off, and the best part is with images turned off you still get the nifty rounded corners.
Back to top
erikZ
Status: Contributor
Joined: 30 May 2004
Posts: 148
Reply Quote
I took a look at that package, too complicated for my taste, although I definitely take your word for it that it works. The really sad thing is to realize that if the rest of the browser makers would start getting a little bit more motivated to support some very cool CSS 3 things like Mozilla / Gecko is currently doing in their proprietary CSS things like -moz-border-radius this stuff really wouldn't be an issue at all.

Having clean CSS control over border curves would be I think the single biggest opening for improving CSS built pages out there, I was looking at that problem on a current project and it was so annoying to not just put in a simple curved border, would have worked for Firefox etc, but nothing else.

Well, that and a few other things, like supporting the CSS table/cell stuff that would enable you to display divs like table cells and rows to create good tableless layouts that still displayed correctly cross browser.

I'd say maybe one day, but since IE 6 doesn't support this, and IE 7 almost certainly won't, this means that for all intents and purposes we're going to have to use these kinds of hacks for almost the next 5-10 years. Avoiding hacks was the whole point of CSS, but it seems like hacks are always going to be with us. Sad.
Back to top
mike
Status: Contributor
Joined: 08 Oct 2004
Posts: 71
Reply Quote
it's really not that complicated. you just link to the javascript and change the color attributes. it's really pretty simple. the only downside is that you do need to have a lil bit of javscript on the page for the onload.

i already have it working on a site. It's still rather clean. sticky me if u want to take a look.
Back to top
mike
Status: Contributor
Joined: 08 Oct 2004
Posts: 71
Reply Quote
update...the link i posted earlier was a much more expanded version then one i'm using and has a ton of different options. I probably won't take the time to go through it all until I need to use it for something.

see:
pro.html.it/esempio/nifty/

for the original stuff. the code towards the bottom there are examples which have alot less code.
Back to top
erikZ
Status: Contributor
Joined: 30 May 2004
Posts: 148
Reply Quote
Oh, that's nice, I like that link much more, that's what I'd call fairly clean, I especially like the no javascript one, that's cool, I think I'll use that, since MS will never get around to providing support for this stuff.

Just getting that boxiness removed will really help pure css stuff a lot, thanks for the update.

Oh, just checked the first method on IE 5.5, doesn't work at all, that's what the page said too, that's annoying, still has market share. I'll check out the JS methods and see how those are.
Back to top
mike
Status: Contributor
Joined: 08 Oct 2004
Posts: 71
Reply Quote
1. Example one: a single div with antialias
2. Example two: brothers divs
3. Example three: transparent by nature
4. Example four: with or without them
5. Example five: color explosion
6. Example six: elastic nifty
7. Example seven: transparent, tabbed menu. Now with borders.
8. Example eight: navigational leaves
9. Example nine: a floated image gallery
10. Example ten: Nifty layout


above are the listed examples using the update. it's still pretty clean and should take care of the ie5.5 problems
Back to top
jeffd
Status: Assistant
Joined: 04 Oct 2003
Posts: 594
Reply Quote
Very nice examples Mike, those things work, the one that really impressed me was nifty6, the browser resize one, perfect, perfect in IE 5.5, looks like a very good technique, thanks for the updated links.

I'm tempted to try those on the left nav of that new site I've been working on, I think maybe a rounded corner box around the left nav might be just what the doctor ordered, have to play around with it a bit, I was thinking of using back ground curve pngs, but that dies on resize. Just have to make sure the code isn't too big.
Back to top
mike
Status: Contributor
Joined: 08 Oct 2004
Posts: 71
Reply Quote
it's not too bad. the only problem is the lil bit of inline js you need for the window load, but it's really not that bad.
Back to top
MatthewHSE
Status: Contributor
Joined: 20 Jul 2004
Posts: 122
Location: Central Illinois, typically glued to a computer screen
Reply Quote
Hey guys, this stuff is great. This may be just the thing for one of my sites, where I've been using a lot of "CSS sliding doors" stuff which gets really messy after awhile. I wish the js files for this weren't so large, but it's not bad particularly if you can serve it compressed.

Only one question; is there any way to fix it so the inline window load bit isn't necessary? I've seen ways to modify scripts that require that to get everything into the external file, but I'm not good enough with JavaScript to figure it out.
Back to top
mike
Status: Contributor
Joined: 08 Oct 2004
Posts: 71
Reply Quote
I've tried, but have yet to figure anything out.
Back to top
Display posts from previous:   
Page: 1, 2  Next
All times are GMT - 8 Hours