snippethtmlMinor

Use of filter and drop shadow

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

shadowdropfilteranduse

Problem

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:



    Drop Shadow

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);
    }

Solution

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

jsbin

Code Snippets

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

<div class="container one">
   <img>
</div>
<div class="container two">
   <img>
</div>

Context

StackExchange Code Review Q#42173, answer score: 4

Revisions (0)

No revisions yet.