Transcorners (4 kb)
Assemble! You all know nifty corners, huh? Meet Transcorners - the guys who will round your corners on mootools.
Download
How does it assemble?
Well, Nifty technogy is used. There are small stripes appending inside of an element which create an illusion of transcorn.
But there are some differences between Nifty and Transcorners:
- Transcorners always try to have the transcornered element size and original element size the same. That means, no (almost) jumping you will notice after stuff will be done. So if you will need to shift corners, you will need to set padding.
- Corners lay before content, so you can and you will have content on the "cornering area". What you will have to do is to add a child element with position: relative and z-index more then 1: <div id="roundme"> <div style="position:relative; z-index:20;"> Hello world </div> </div>
- You can set any radius and any transition to have different effects.
- Transcorners are smart. They can guess any option if it is blank.
- No border color set Transcorners check if there is border set in CSS. If it is set they will emulate it, if not then they will have the same color as the background-color of an element.
- No background color set It will be the same background color as element has.
- No corner color set It will be the same as element‘s parent background color.
- Both border and background could be overriden in CSS
Compatability
They‘re just in development stage. Firefox and IE6 works perfectly, KHTML is yet untested after my possible fix. Opera is untested also. Any tests with screenshots and debugs would be appreciated. Leave them in the post comments please.
| Browser |
Result |
| Firefox, Camino |
OK |
| Internet Explorer 6 |
OK |
| Konqueror |
OK |
| Opera 9 |
OK |
| Safari |
Fails (untested) |
| Internet Explorer 7 |
Fails (untested) |
| Opera 7 |
Untested |
| Opera 8 |
Untested |
How to assemble?
East as pie!
//old style new Transcorner(ELEMENT, SIDE, OPTIONS); //new style ELEMENT.makeRounded(SIDE, OPTIONS);
What are these?
- ELEMENT: Usual variable with element.
Like $(‘content‘) or $(‘myblock‘)
- SIDE: A string that declares the side which should be rounded:
- ‘top‘ both top corners
- ‘bottom‘ both bottom corners
- ‘top left‘ just top left
- ‘bottom right‘ just bottom right
- ‘bottom right, top‘both top corners and bottom right
- false all 4
So we can set sides as a comma separated string. We can not have different corners on the same side: 10 pixel bottom left and 20px bottom right — that‘s impossible.
- OPTIONS: An object with values. Usual for moo scripts:
- radius: 10 the amount of pixels should be rounded. This value is rough so play with it
- borderColor: red the color of of 1px border around corners.
- backgroundColor: #fff the color inside of the rounded part.
- transition: fx.linear the transition function. Look into the mootools js file for more
- onComplete: func the function that will be called on complete of rounding
Show me working examples!
//old style new Transcorner( $(‘content‘), //element ‘top right‘, //side { radius: 10, transition: fx.linear }//options );
//new style $(‘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 all corners with 10
$(‘example2‘).makeRounded();
//round top left corner with grey border and 20 pixel radius
$(‘example3‘).makeRounded(‘top left‘, {borderColor: ‘#777‘, radius: 20});
//round all top corners with 10
$(‘example4‘).makeRounded(‘top‘);
//round all top and bottom right cornerslinear transition
$(‘example5‘).makeRounded(‘top, bottom right‘, {transition: fx.linear});
