Creating a simple Glass Photo Frame with CSS

Let's start with creating a simple glass photo frame effect. It will look like the above.

Here, I have used a sample image for applying this effect to. There is nothing special in the html code.

	Image1
CSS Code
.glass_effect
{
 border: 5px solid #FFFFFF;
 margin: 50px;
 box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.3),
             0px 20px 15px 0px rgba(0, 0, 0, 0.6);
}

Even the CSS code is really simple to understand. Here, we are first applying a white border with 5px width to make it realistic photograph. Then we have the box-shadow property with two shadows. One shadow simply adds an additional transparent border of 15 px. The shadow color is defined with rgba to introduce the transparency (alpha = 0.3). This shadow gives the feeling of simple glass. Now we add one additional shadow with 20px vertical offset and transparency of alpha 0.6. This shadow is drawn just below the white border of the photograph making it look more like a glass photo frame.


This code used above is pretty simple to apply anywhere. If you declare it as a class as I have done in the example, you can apply the similar effect to any image without writing or changing any code. Cool and simple...isn't it? The box-shadow property is now supported by almost all recent browsers. So, you can safely use it for your design.

Creating Windows Aero Glass Style effect with CSS

Let's now create a glass effect similar to Windows Aero. While in earlier example, we applied the effect directly to the photograph, in this case, we will create a separate layer for the glass. Once the glass layer is ready, we will place it above the photograph.


Let's begin with creating this layer. For creating the real glass effect, we will define the background in rgba with alpha value of 0.1. After this, we will introduce two inset box shadows for getting the light variation. Then, a third box shadow with little horizontal and vertical offset to complete our cover glass. At last, we make the corners or the cover glass round with a border-radius of 10px.

width: 520px;
height: 300px;
background-color: rgba(0,0,0,0.1);
border-radius: 10px;
box-shadow: inset 0 50px rgba(255,255,255,0.2),
            inset 0 -15px 30px rgba(0,0,0,0.4),
                  0 5px 10px rgba(0,0,0,0.5);

The output of the above code is as follows:

CSS glass effect using box shadow cover

CSS glass effect using box shadow cover

Now coming back to our sample image - here is the HTML code.

Image1

As you can see, I have placed the image inside the div tags. This is because we need to use the :after pseudo element to place the glass cover above this div.

#photo-frame:after
{
 content: "";
 display: block;
 position: absolute;
 width: 520px;
 height: 300px;
 border-radius: 10px;
 background-color: rgba(0,0,0,0.1);
 box-shadow: inset 0 50px rgba(255,255,255,0.2),
             inset 0 -15px 30px rgba(0,0,0,0.4),
             0 5px 10px rgba(0,0,0,0.5);
 -moz-transform: translate(-15px, -285px);
 -webkit-transform: translate(-15px, -285px);
 -o-transform: translate(-15px, -285px);
 -ms-transform: translate(-15px, -285px);
 transform: translate(-15px, -285px);
}

We are styling this :after pseudo class with the glass cover code with one additional CSS3 property - transform.


If you are aware about the :after pseudo elements, you know that the 'after pseudo class' is placed just after the parent element. Here, the parent element is div with 'photo-frame' id. Also, with :before and :after pseudo classes, it is mandatory to define the content. Since, we don't want any content to be displayed here, I have left it blank with just blank quotes. By default, these pseudo elements are inline in nature, so we need to define it as block.

Explanation of the Width and Height.

As far as width and height are concerned, these are based on the actual width and height of the image used. In this case, the actual width and height of the image are 490px and 270px respectively. In the css code, you see that these are defined as 520px and 300px, 30 px more for introducing a gap of 15px around the image inside frame. You need to explicitly define these two properties for this effect to work.


CSS3 transform property.

CSS3 transform property is still not supported by the leading browsers without vendor extensions. You need to define it with -webkit-, -moz-, -o- and -ms- prefixes. Here, we are translating the glass cover by 15 px in left and 285px upwards. As explained earlier, the :after pseudo element is placed just after the parent element. So, we need to translate it by 270 px upwards to take it just above the photograph. Now to leave the gap of 15px all around the photograph, we are translating it by 15 mm in left direction and 15mm more upwards.

This is the final output:

CSS glass effect using box shadow

CSS glass effect using box shadow

Please note here that you cannot use this effect on multiple photographs with class definition unless they are all of same size. You need to explicitly write the css codes for each photograph of different sizes.