fabianmoronzirfas
2/21/2013 - 9:57 AM

inset-shadow.html

inset-shadow.html
content_copyfile_download
<!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>