Thursday, September 28th, 2006
Transcorners: Because you are obsessed with rounded corners
Category: CSS
, JavaScript, Library
People really are obsessed with rounded corners aren't they? If we had a simple way to express them in CSS, maybe then we would be writting JS libraries and CSS hacks to give us spikey corners or something :)
Well, the latest kid on the block is Transcorners, which is a mootools based rounded corners system.
Examples
JAVASCRIPT:
-
-
$('content').makeRounded('bottom left', {radius: 100});
-
-
-
//round all corners with 30
-
$('example1').makeRounded({radius: 30});
-
we also have background:transparent; and border:1px solid #fff; in CSS on this.
-
-
//round top left corner with grey border and 20 pixel radius
-
$('example3').makeRounded('top left', {borderColor: '#777', radius: 20});
-
4 rating from 49 votes
Except for the fact that they don’t appear to be working in Firefox 1.5.0.7. I can only get the corners to appear correctly in IE
pixelated corners that don’t work in Safari? No thanks.
Actually, I take that back, it does work correctly in Firefox but not 100% of the time.
I love this corner plugin for jQuery: http://www.malsup.com/jquery/corner/
I can view corners perfectly with my FireFox 1.5.0.6. It seems to be a nice moo-implementation.
It is working for me in FF but not in Safari.
AFAIK, nothing works in Safari. Safari doesn’t even work in Safari. :-)
ok, everyone turn of their JavaScript and look again. Is that what you want your site to look like for people without javascript? Not very unobtrusive :P
Matt: This is not about transcorners, it’s about effect onload. It’s bceause I added it. Look at red rectangle. It’s as is.
OMG… this comment system should auto block anyone saying see what “this or that” looks like with javascript turned off. Its a blankity blank JS Effect (meaning DUH it requires js turned on 8D . Its up to the developer to make sure the page degrades properly not the widget designer. Q: How many aol users does it take to turn on JS. A: To many to count becuase the average user doesnt know how.
Awright Mario, Agree on widget-developer statement.
Dramatically improved logic, a bit filesize manipulation. Lines seem long anyways because of variable name :D
Not working on IE 6 on XP… :(
Marc: it is working.
Good job, Yaroslaff! It looks well in both IE6 (WinXP) and FF 1.5.0.7. Could somebody test in FF 2 RC1???
I’m sure it will work in ff 2 :-)
Finally working in safari!
I’ve tested it in Safari2.0.4, FF2 RC1, IE6 and IE7RC.
Everything’s working fine, but just that it gives a warning in IE.
Good job, thanks!
[...] Ajaxian » Transcorners: Because you are obsessed with rounded corners Javascript pour créer de jolis coins ronds sur vos interfaces …. sans images. A tester [...]
The idea is simple, compatibility is the hack.
I’ve done exactly the same thing, even using same algorithm a few weeks back. Yet I found current browsers are still far away from being powerful enough to render vast number of elements. So the trick is not really applicable.
SVG will be the correct way of doing these things, once IE figures out how to render it.
Rounded Corners and Frametastic.
Post poco attinente con Drupal, ma volevo comunque segnalare la nuova creatura in campo Rounded Corners, Transcorners e Frametastic, un tool in ajax per creare wireframe, con relativo codice HTML.Transcorners introduce la novità nella creazione tramite
Is a very good job, but without opt.js (18 Kb) don’t works.
prototype corners at http://nurey.com/corners.html
the transcorners site is down. does anyone know where I can get the code? are there other moo-based corners solutions out there?
No out.
My blog, teg online http://blog.veromaxx.com/tag/buy-celebrex/