Skip to content

Instantly share code, notes, and snippets.

@netsi1964

netsi1964/html-vignetShadow.html

Created May 5, 2012 07:28
Show Gist options
  • Save netsi1964/2600636 to your computer and use it in GitHub Desktop.
Save netsi1964/2600636 to your computer and use it in GitHub Desktop.
Download ZIP
Adding a vignet shadow to images
Raw
html-vignetShadow.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.clip {clip: 0,0,100%,100%}
.shadow {
drop-shadow: 0,0,20%,rgba(0,0,0,.5);
width: 85%;
height: 85%;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var $original = jQuery('.vignet');
alert(original);
var iHeight = $original.outerHeight();
var iWidth = $original.outerWidth();
var $vignet = '<div class="clip" style="width: ' + iWidth + 'px; height: ' + iHeight + 'px;"><div class="shadow"></div></div>';
alert($vignet.html());
$original.append($vignet);
});//]]>
</script>
</head>
<body>
<img src="http://farm6.staticflickr.com/5266/5691827649_dc70ed4bf3_b.jpg" class="vignet" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment