Pure CSS method for achieving Right Angle Corners
By now I've seen dozens of articles that help you get rounded corners in your web pages, either using CSS, Javascript, Ajax, automatically-generated graphics on-the-fly, or a combination of all of these techniques. But for a sharp, professional look -- nothing beats that right angle corner look, which remains popular on many websites. But how to achieve this crisp effect? And how to guard against cross-browser compatability issues? For example, it's no good getting 90 degree angles in firefox if opera renders them as 89 degrees, and IE gives you 95 degrees. The trick is to use the following nice clean pure-CSS solution. <style>div {border: 1px solid #000; padding:5px}</style>
Now let's see it in action! This box has the modern 'right-angle-cornersTM' look and feel! Of course, this code is not production ready -- a true web designer would use a JSON script injection technique to generate the right angle corners on the fly, using prototype to slowly fade the corners from a standard rounded look and feel, into the high impact square look. If you do use this code, I'd of course like a link-back, and a cut of any derived profits. (stuck in sarcasm mode due to sleep deprivation)
'Haacked' on Thu, 15 Feb 2007 21:54:31 GMT, sez: ...and we can call this technique Bordr.
Phil
'Scott' on Thu, 15 Feb 2007 23:14:37 GMT, sez: Better yet, "Bordr 2.0", now enhanced with ajax, RSS feeds and leveraging synergies, of course. Oh, and it's a platform.
I'd opt for keeping things simple myself, but then that darned design thing got in the way. ;)
'lb' on Thu, 15 Feb 2007 23:41:40 GMT, sez: >"Bordr 2.0", now enhanced with ajax, RSS
>feeds and leveraging synergies
maybe with yahoo pipes we could re-use the square corners from other sites without having to re-invent our own (square) wheels on every site?
'Jim Allchin retires!' on Fri, 16 Feb 2007 00:31:58 GMT, sez: Missed this somehow...
Jim Allchin retired. (and wrote an amusing blog entry about it) (lb)
'Andy' on Fri, 16 Feb 2007 06:24:06 GMT, sez: And we've just had our developers working on round corners, after only having square ones! How 2006 are we?
'Des Traynor' on Fri, 16 Feb 2007 09:13:50 GMT, sez: Thats a pretty sweet effect, you should write an article for A list Apart.
One thing I have to say though... My current browser of choice is Mozilla Firebird .372 (nightly build from 1997), and my monitor works at an unconventional 1029x745.8 pixels on a Commodore Vic 20, and this effect doesn't work correctly.
I presume you are going to make an allowance/hack for my type of set up, as there are at least 4 people out there like me.
'lb' on Fri, 16 Feb 2007 09:30:46 GMT, sez: So Des, what angle you gettin? Check v-hold and remove any large magnets from your video room.
'Des Traynor' on Fri, 16 Feb 2007 10:51:44 GMT, sez: Hmm, its an odd one, but it kind of works:
'lb' on Fri, 16 Feb 2007 10:55:59 GMT, sez: lookin good Des.
Hit the De-Gauss button, count to 5, and if it's a little fuzzy after that whack it on top.
Any problems you see after that are with your own eyes i'm afraid.
'Haacked' on Sun, 18 Feb 2007 17:24:20 GMT, sez: Wow, the angle is off,but the dropshadow is right on! Who knew the Vic 20 could render a dropshadow?
'SenseiLoco' on Thu, 22 Feb 2007 11:32:43 GMT, sez: I just found this on Digg...
http://www.drivl.com/posts/view/700
Coincidence? Conspiracy?
It's like they took your idea and ran wAAAAAAAAAAAAAAAy far off with it.
'lb' on Fri, 23 Feb 2007 09:19:18 GMT, sez: cheers sensei... yeh i think there's a bit of "idea borrowing" going on at drivl... still, i think their take on it is pretty damn good, so i ain't bitter. Except i do keep stabbing this drivl voodoo doll in the pee hole. ;-)
|
secretGeek .:dot Nuts about dot Net:.
Just Wally
Complete secretGeek Archives
The Best Software Writing I
The Business Of Software (Eric Sink)
