Thursday, September 28th, 2006

Transcorners: Because you are obsessed with rounded corners

Category: CSS, JavaScript, Library

<p>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
< view plain text >
  1. $('content').makeRounded('bottom left', {radius: 100});
  2.  
  3.  
  4. //round all corners with 30
  5. $('example1').makeRounded({radius: 30});
  6. we also have background:transparent; and border:1px solid #fff; in CSS on this.
  7.  
  8. //round top left corner with grey border and 20 pixel radius
  9. $('example3').makeRounded('top left', {borderColor: '#777', radius: 20});

transcorners

Related Content:

Posted by Dion Almaer at 9:50 am
24 Comments

+++--
3.8 rating from 57 votes

24 Comments »

Comments feed TrackBack URI

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

Comment by Donavon Yelton — September 28, 2006

pixelated corners that don’t work in Safari? No thanks.

Comment by Gabe da Silveira — September 28, 2006

Actually, I take that back, it does work correctly in Firefox but not 100% of the time.

Comment by Donavon Yelton — September 28, 2006

I love this corner plugin for jQuery: http://www.malsup.com/jquery/corner/

Comment by jazzy — September 28, 2006

I can view corners perfectly with my FireFox 1.5.0.6. It seems to be a nice moo-implementation.

Comment by Andrea Giammarchi — September 28, 2006

It is working for me in FF but not in Safari.

Comment by Dion Almaer — September 28, 2006

AFAIK, nothing works in Safari. Safari doesn’t even work in Safari. :-)

Comment by Ryan Gahl — September 28, 2006

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

Comment by Matt Oakes — September 28, 2006

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.

Comment by Yaroslaff — September 28, 2006

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.

Comment by Mario — September 28, 2006

Awright Mario, Agree on widget-developer statement.

Comment by Yaroslaff — September 28, 2006

Dramatically improved logic, a bit filesize manipulation. Lines seem long anyways because of variable name :D

Comment by Yaroslaff — September 28, 2006

Not working on IE 6 on XP… :(

Comment by Marc — September 29, 2006

Marc: it is working.

Comment by Yaroslaff — September 29, 2006

Good job, Yaroslaff! It looks well in both IE6 (WinXP) and FF 1.5.0.7. Could somebody test in FF 2 RC1???

Comment by Rasmus — September 29, 2006

I’m sure it will work in ff 2 :-)

Comment by Yaroslaff — September 29, 2006

Finally working in safari!

Comment by Yaroslaff — September 29, 2006

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!

Comment by Stev3n — September 29, 2006

[...] Ajaxian » Transcorners: Because you are obsessed with rounded corners Javascript pour créer de jolis coins ronds sur vos interfaces …. sans images. A tester [...]

Pingback by Shoob » Blog Archive » links for 2006-09-30 — September 30, 2006

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.

Comment by terry xu — October 2, 2006

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

Trackback by Psicomante Projectlog — October 6, 2006

Is a very good job, but without opt.js (18 Kb) don’t works.

Comment by Paolo — June 21, 2007

prototype corners at http://nurey.com/corners.html

Comment by ilia — August 27, 2007

the transcorners site is down. does anyone know where I can get the code? are there other moo-based corners solutions out there?

Comment by Phil Plante — November 16, 2007

Leave a comment

You must be logged in to post a comment.