Skip to content

Instantly share code, notes, and snippets.

@kgn

kgn/inset-shadow.html

Created December 10, 2010 00:29
Show Gist options
  • Save kgn/735570 to your computer and use it in GitHub Desktop.
Save kgn/735570 to your computer and use it in GitHub Desktop.
Download ZIP
An example of how to add an inset shadow on an img.
Raw
inset-shadow.html
<!DOCTYPE HTML>
<html>
<head>
<title>Inset Shadow on Images</title>
<style type="text/css">
.inset-shadow{
-moz-box-shadow: 0 0 5px black inset;
-webkit-box-shadow: 0 0 5px black inset;
box-shadow: 0 0 5px black inset;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img.inset-shadow').each(function(){
var $img = $(this);
$img.load(function(){
var $div = $('<div/>');
$div.width($img.width());
$div.height($img.height());
$div.css('background-image', 'url('+$img.attr('src')+')');
var display = $img.css('display');
//If the div is set to inline the width and height will be 0 :(
//inline-block appears to be the only way around it but it's not
//supported in all browsers :( The browsers it's not supported in
//are probably the same ones that don't support box-shadow,
//so a solution maybe to add a browser check.
if(display === 'inline'){
$div.css('display', 'inline-block');
}else{
$div.css('display', display);
}
$div.attr('class', $img.attr('class'));
$img.replaceWith($div);
});
});
});
</script>
</head>
<body>
Blah blah blah <img class="inset-shadow" src="http://www.harlemfur.com/images/Dog_Olive.jpg" /> blah blah blah.
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment