Pseudo Element Shadow Test

HTML

<div id="map">
    <div>test</div>
    <div id="player"></div>

</div>

CSS

#map {
    position: relative:
    width: 100%;
    height: 500px;
    background: gray;
}

#player {
    position: relative;
    left: 100px;
    top: 100px;
    z-index: 1;
    border: 1px solid white;
}

#player {
    width: 300px;
    height: 300px;
    background: transparent url(http://a0.twimg.com/a/1290123564/images/logos/twitter_newbird_white.png) no-repeat; 
}

#player:before, #player:after {
    z-index: -1;
    position: absolute;
    left: 20px; 
    top: 20px;
    border: 1px dotted cyan;
}

#player:before {
    /*content: url(http://a3.twimg.com/a/1290123564/images/logos/twitter_newbird_blue.png);*/
        content: '';
    width: 300px;
    height: 300px;
    background: transparent url(http://a3.twimg.com/a/1290123564/images/logos/twitter_newbird_blue.png) no-repeat;

}

JavaScript

$(function() {
    $('#player').draggable();
});