jCorner is a jQuery plugin to create a flat designed paper folding effect at the bottom-right corner, which is useful for both stylishness and a hint for a link.
It uses CSS border tricks to achieve the effect, without using any image, which enables us to create corners of any size. See how to achieve this.
It's a tiny library with minified JavaScript file of 1.2KB. Download Now!
To use jCorner, the following files should always be included.
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="jCorner.js" type="text/javascript"></script>
Suppose we want to add a corner to an element with id paper in the HTML, jCorner makes it as simple as:
HTML:
<div id="paper"></div>
JavaScript:
$('#paper').jCorner();
jCorner is an open-source project under MIT License.
There're 4 parameters to set with jCorner, none of which is compulsory. Default values are:
size: 40; id: undefined; link: undefined; background: '#fff';
Example:
$('#paper').jCorner({
size: 25,
background: 'black'
});
$('#paper').jCorner({
background: '#ffcc00',
link: 'about.html',
id: 'about'
});
As its name suggests, the size parameter defines how big is the corder, in pixels.
It might be useful to set an id to the corner. We can do this by setting the id parameter. If it is undefined, there would be no id attribute of the corner.
We may add a link to the corner so that it will open a new tab when the corner is clicked. The value of link should be a string like "http://zhangwenli.com".
We usually need to set this parameter since the background in different web pages are different. For example, the background is set to be "#ccc" in this page.
jCorner is developed by Wenli Zhang, a hobbyist Web front-end designer. Check her personal site for more information.
Follow her on Instagram or Google Plus.
Email me@zhangwenli.com if you wish to give her a dribbble invitation!
Background image used in this page is designed by Peax.