Skip to content

fritzZz/Rounded

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Rounded

Rounded is a simple Mootools class that help you to obtain round corners on each element on your page.

Screenshot

How to Use

It's very easy to use this component. You can use it on each object in your document. In this sample I use Rounded to obtain rounded corners on my div. In the first div I use the default radius (10px), in the second sample, in the second I specify a different value (5px)

HTML

<div id="first" style="background-color : #cccccc; width : 200px;height:30px; padding-left:1em"> 
	First sample (default corner)
</div>
<div id="second" style="background-color : #cccccc; width : 200px;height:30px; padding-left:1em"> 
	Second sample (corner 5px)
</div>

You can initialize corners on 'domready' event of your document

Javascript

window.addEvent('domready', function() {
	// round first div
	var myRound = new Rounded($$("#first"));
	// select radius in px
	var opt = {
    	radius : "5px"
    }
	// round second div
	var myRound = new Rounded($$("#second"),opt);
});

The possible options are the follows :

radius: radius in pixel for your rounded corners,
selector: default selector if not specified,
cornered: css class used after transformation

About

Mootools class wich creates round corners on elements of html page

Resources

Stars

Watchers

Forks

Packages

No packages published