- 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!
Can't you at least give ONE decent example on how it actually is used inside a page ??
ReplyDeleteEven your "sample" above is just a simple image.
Does this even work at all ????
Example? Suuuure. I've included some code above to demonstrate how it can be used within a page.
ReplyDeletethis code doesn't work, your example code doesn't work, jquery examples don't work, what a load of rubbish, please remove and stop wasting eveyones time
ReplyDeleteToo much intake of whey protein may damage your kidney. Ask someone knowledgeable before you go on taking this supplement.
ReplyDelete