Skip to content

A jQuery Library used to make flat bevels on block HTML objects

Notifications You must be signed in to change notification settings

davellx/jQuery-Biseau

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Some time ago, I was looking for a flat bevel effect so, because I'm really lazy, I began looking for pre-made solutions... unfortunately none of them fitted my needs (in facts it was the needs of my client bu... ok nobody cares) : 
- jQuery Corners does it very well (http://jquery.malsup.com/corner/) with the option "bevel" but not on an image or gradient background.
- corner.js (http://www.netzgesta.de/corner/) does it too with the option "ibezel" but only on images, and I needed it on blocks with content inside
- there is no solution in CSS o_O other than some fucking shitty 3D effect with the same name "bevel" (seriously, who uses that ?? It's ugly !!)

As I looked forward, I found about the Border Slants (http://www.infimum.dk/HTML/slantinfo.html) but no hint on an automated effect for mass producing on a website.
So I decided, for my project and now for the glory, to make a jQuery plugin that would automate the process of making a beveled background on a HTML block.

Why this name ? "Biseau" is one of the french translations of "bevel", as I'm french and I lack imagination, I choosed that name. ;)

Usage : 
1/ Insert the jQuery and jQuery.biseau script in your page :
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="../src/jquery.biseau.js"></script>

2/ Add a block in your HTML code of course (what would you want to bevel otherwise ??) with a size and a background color;
<div id="monbloc" style="width:100px;height:100px;background-color:#999999;"></div>

3/ Call the method on this block : 
		$(document).ready(function(){
			$('#monbloc').biseau({options});
		})

The options :
Just pass an object with theses properties : 
- tl : size of the Top Left bevel (default : 0)
- tr : size of the Top Right bevel (default : 0)
- bl : size of the Bottom Left bevel (default : 0)
- br : size of the Bottom Right bevel (default : 0)
- zindex : In order to make the content of the block still visible, I use the z-index to order things. If you have some z-index issues, you may want to modify that. (default : 4)

See the little example included for... well... an example.

TODO : 
- add the possibility to make a border (should be possible)
- test, test and test again
- make it work on special tags like "table" ?

About

A jQuery Library used to make flat bevels on block HTML objects

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published