Use of filter and drop shadow The following code will be used for educational purposes. It is to simply demonstrate how to apply a drop-shadow using a CSS3 filter. Any feedback on areas where I have not used best practices would be great.

JSBin

HTML:



&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Drop Shadow&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="drop-shadow.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- Introduction to the text shadow property --&gt;
    &lt;div class="container one"&gt;
       &lt;img width="250" height="250" src="http://iancottam.co.uk/img/footy.png"&gt;
    &lt;/div&gt;
    &lt;div class="container two"&gt;
       &lt;img width="250" height="250" src="http://iancottam.co.uk/img/footy.png"&gt;
    &lt;/div&gt;
    &lt;!-- Support Info: http://caniuse.com/css-filters --&gt;
&lt;/body&gt;
&lt;/html&gt;


CSS:



    body{
            background: #ccc;
            margin: 0;
    }
    h1{
        font-size: 5em;
        font-family: Georgia;
    }
    .container{
        padding: 20px 50px;
    }
    .one img{
        -webkit-filter: drop-shadow(0 0 30px black);
    }
    .two{
        background: black;
    }
    .two img{
        -webkit-filter: drop-shadow(-15px 0px 20px white);
    }
Your code it's perfectly fine

I would just change, to stress the fact that the images are the same:

.container img {
    width: 250px;
    height: 250px;
    content: url("http://iancottam.co.uk/img/footy.png");
}


and then 

&lt;div class="container one"&gt;
   &lt;img&gt;
&lt;/div&gt;
&lt;div class="container two"&gt;
   &lt;img&gt;
&lt;/div&gt;


jsbin