Vintage Image Effect with CSS box shadow and Gradient

Sometimes back, I have written a tutorial on how to create glass effect on image with pure CSS. Well, CSS3 has brought us a lot of capabilities to do experiments on images and make our life simpler as web designers. Today, in this article, we will create Vintage effect on image using pure CSS. And this vintage effect will work on all web browsers except IE 8 and earlier. And to put ice on the cake, it is possible with just a few lines of codes all easy to understand and implement. For this retro effect, we will use only box-shadow and gradient properties of CSS3.

Before we move on I am sure you would like to see how our image will look like before and after applying this retro photo effect. So, it is here for you to preview.

vintage-image-effect-cover

View the Demo Page

And as per my practice, I will put all the files in a zip folder which you can download from the end of this tutorial. So, let’s move on and learn what exactly goes behind this retro effect.

Here again, I will start with the html code first.

HTML Code

<body>
    <div>
        <h1>
            Vintage Image Effect with CSS</h1>
        <div id="photo-frame">           
                <img src="car.jpg" alt="Vintage Car" />                    
        </div>
    </div>
</body>

As you can see, there is nothing much here. The heading, image and footer everything is kept inside the “contents” div which is used to center align everything. The image on which we are going to apply this effect is put inside the div with id “photo-frame”.  So, for changing the image, you just need to replace the source attribute (src) here. The codes for creating vintage effect will be applied on the “photo-frame” div.

The Framework

The magic is done (obviously) by CSS codes. Let’s go step by step in CSS.

.contents
{
    width: 800px;
    margin: 50px auto;   
}

As explained in the beginning, the function of “contents” div is simply to center align everything inside it. This is done by setting the horizontal margins to auto.

And this is the CSS code of photo-frame.

#photo-frame
{
    margin-top: 50px;
    background-color: #FFFFFF;
    width: 720px;
    padding: 20px;
    position: relative;
}

We are just defining the width of the photo-frame which is equal to that of pictures width. Padding works as the border for the photo. The border has intentionally been kept more (20px) to get better retro effect on image.  We will discuss in a minute why I have used position: relative here. If you see the photograph at this point of time, it will look like this:

vintage-original-image

You may wonder where the codes for making vintage effect are. Well, we are using “:after pseudo element” to put the vintage photo cover above it. If you are not aware about pseudo elements, please go through the W3 documentation on generated elements.

OK, so here is the CSS code for #photo-frame:after pseudo class.

#photo-frame:after
{
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 0, 0.5)60%,
                rgba(255, 136, 0, 0.3)80%);
    box-shadow: inset -5px -3px 15px 0 #C28304,
                inset 0px 0px 0px 500px rgba(255, 255, 255, 0.15),
                0 5px 10px rgba(0,0,0,0.5);
}

The “:after pseudo” class is displayed just after the parent class. We don’t want any content after our image, so we are defining the content as blank. You may wonder why at all we are defining the content property here. This is because with all :before and :after pseudo classes, you need to define the content. Of course, it can always be kept blank with just two quotes.

By default, the pseudo elements are inline in nature, but for our requirement, we need it as block.

And since we want to place this :after pseudo class just above the image, we have defined the position of parent “photo-frame” as relative and :after pseudo class as absolute. After doing that we can easily define the position of this class relative the parent photo-frame class. Obviously the position of this class will be zero from both top and left which you can find in the CSS. To match the width and height to that of photo-frame div, we are defining both of these to 100%.

Well, till now, we have just completed the framework for applying the vintage effect. It’s time to be creative now!

Image Vintage Effect

We will start with CSS box-shadow. You can see; I have defined three box shadows here. The first box shadow creates the retro effect on white borders with inset shadow.

inset -5px -3px 15px 0 #C28304

The second shadow simply puts a 90% transparent white cover on entire photograph.

inset 0px 0px 0px 500px rgba(255, 255, 255, 0.1)

And the third shadow creates a regular drop shadow.

0 5px 10px rgba(0,0,0,0.5)

So, 70% of the vintage effect is created by the two inset box shadows. The rest of the effect is created by applying a gradient of yellow and orange with background property.

background: linear-gradient(0deg, rgba(255, 255, 0, 0.5)60%, rgba(255, 136, 0, 0.3)80%);

If you just see the retro photo cover without image, it will look like this.

vintage-photo-cover

Now, there are two things to note here.

  1. I have omitted the vendor prefixes for the CSS3 properties i.e. box-shadow and background gradient. But don’t forget to include it in your projects for better compatibility. You will find these vendor prefixes in the downloaded files.
  2. The transparency to the gradient and box-shadow is achieved by declaring the colors in rgba. Here ‘a‘ denotes alpha (transparency) which ranges from 0 to 1 – Zero being fully transparent while one being fully opaque.

That’s all my friends. We have successfully achieved the vintage effect on the photograph.  You may like to play around and tweak some of the properties to get just the effect you desire.

vintage-image-effect

If you wish to download, here I have kept all the files used in this example in a zip folder.

Download CSS Vintage Image Effect

Tagged on: ,

Leave a Reply