- rounder corners w/ adjustable radius
- border w/ adjustable width and color
- drop shadow w/ adjustable position, color, opacity
- image scaling
- image positioning
- 2K in size, minified (for those of you who do not gzip your content)
From left to right; it's the original image, rounded image, and scaled/rounded image with border and shadow effects. There have been some requests to apply this to any HTML element, although that may come if this grows in popularity.
Here is in example of how it can be used within a page:
<html>
<head>
</head>
<body>
<img src="img/sample1.jpg" class="round" alt="Sample 1" /><br/>
<img src="img/sample2.jpg" class="round" alt="Sample 2" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/dropCurves.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img.round").dropCurves({
w:500, // scale image to width 100px
h:500, // scale image to height 120px
bSize:2, // 2px border size
bColor:'#000', // black border
sColor:'#333', // shadow color
sX:-3, // shadow offset X
sY:3, // shadow offset Y
o:0.5, // shadow opacity
r:10 // corner radius
});
});
</script>
</body>
</html>
Like what you see? You can get it here!
http://plugins.jquery.com/project/dropcurves
Feedback??
Thanks!
