5
\$\begingroup\$

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:

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

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);
    }
\$\endgroup\$
4
\$\begingroup\$

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

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

jsbin

\$\endgroup\$
  • \$\begingroup\$ CSS backgrounds aren't semantically the same as <img> tags. For example, some browsers will ignore CSS backgrounds when printing. \$\endgroup\$ – 200_success Feb 19 '14 at 19:03
  • \$\begingroup\$ @200_success: It's true that CSS backgrounds aren't the same than img; but I am not using CSS backgrounds. \$\endgroup\$ – vals Feb 19 '14 at 19:06
  • \$\begingroup\$ Sorry, I stand corrected. I had read it carelessly since I wasn't familiar with this feature of CSS 3. \$\endgroup\$ – 200_success Feb 19 '14 at 19:34
  • \$\begingroup\$ Never mind :-) !! \$\endgroup\$ – vals Feb 19 '14 at 19:38
  • \$\begingroup\$ There's no real benefit to this suggestion, it's just change for the sake of change. \$\endgroup\$ – cimmanon Feb 19 '14 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.