CSS Drop Shadow Effect

    I think many of you have faced the task of creating a double / non-standard framework for images on the site. In part, I described the technique for creating such a framework here . But I did not mention (and to be honest, I myself didn’t think about it) in that article there is one interesting nuance.
    Using this technique, you can create a shadow effect for a picture, literally in a couple of lines. What should be done?
    To begin with, I remind you that to create a double / non-standard frame for images, you need to set an indent width of 1px for the image and set it to either border with the color and thickness parameters, or put the image in the container and set the indent and background image for the container.
    In this case, everything is simpler. You need to set padding and border for the picture from only two sides, instead of four and the background. For example, like this:
    .shadow {
    border-bottom: 2px solid #eee;
    border-right: 2px solid #eee;
    padding-bottom: 2px;
    padding-right: 2px;
    background: #ccc;
    }

    Here is an example:

    I’m not sure that in the picture with a white background it looks as it should, but still :)
    With no less success, you can do this by setting the background image and playing with its positioning.
    Naturally, it is possible and necessary to experiment to achieve the desired effect, but the essence is clear.
    PS In Quircks Mode in Internet Explorer 6 padding for img will not work, but if you still work in Quircks Mode, then this is your problem :)

    Also popular now: