Saturday, December 29, 2007

rounded corners anyone?

You may notice my new rounded corners.

Well in true fashion, they're CSS corners.

Instead of loading up one of the many css corner library, i decided to take the opportunity to write my own. The other plus is that as this is a blogger account, i have no real file storage, so linking against the jquery lib makes way more sense.

//Corner rounding function
roundCorners = function( pElement, pSize, pForeground, pBackground ){
console.log( 'Corner size ' + pSize);
console.log( 'Fore color ' + pForeground );
console.log( 'Back color ' + pBackground );
if( pBackground.match('none') != null ){
pBackground = 'transparent';
//console.log('transparent background');

containerStr = '<div class="cornerContainer" style="margin:0px 0px;height:auto;background:'+ pBackground +'"></div>';
cornerAttributesStr = 'border:none;overflow:hidden;height:1px;background-color:'+ pForeground +';';

//Reset the parent element
$( pElement).parent().css('padding','none');

//Insert container Div and set background color
$(pElement).prepend( containerStr );
$(pElement).append( containerStr );

for(i=1;i < pSize; i++){
$('div.cornerContainer').eq(0).append('<div style="' + cornerAttributesStr + 'margin: 0 '+ Math.round(pSize/i) +'pt"></div>');
//console.log('Insert element ' + pSize/i);

for(i=pSize; i > 1; i--){
$('div.cornerContainer').eq(1).append('<div style="' + cornerAttributesStr + 'margin: 0 '+ Math.round(pSize/i) +'pt"></div>');


Currently it doesn't support chaining, however according to my understanding, you just have to encapsulated within a jquery.extend, and change the passed object references call and your good to go.

No comments: