We see 4 examples of colorful photo frames that can be created with CSS without using images.
In this CSS workshop we are going to create a series of 4 photo frames, which we can use on a web page to improve its presence, but without complicating our lives. Once the frame that we like the most has been chosen, we can use it repeatedly on the page so that all the photos look similar and the web design also gains a bit of personality.
To make this series of frames we have avoided the use of additional images, only the photographs, which makes the design easier to apply, just by defining the CSS styles.
We can on a separate page.
First CSS framework, which is simple and styles both the photo container and the image itself.
.frame1 {
padding: 8px;
background-color: #f5f5f5;
width: 200px;
border: 1px solid #999999;
}
.frame1 IMG{
border: 1px solid #000000;
}
In this case we have defined a space between the frame and the photo, a background color and a border. With the second declaration we are also defining a black border for the image, so that it stands out more.
Now let’s see the second frame, which we wanted to make a raised border.
.frame2 {
padding: 8px;
background-color: #f5f5f5;
width: 200px;
border-bottom: 1px solid #999999;
border-right: 1px solid #999999;
}
We’ve defined CSS styles for a space between the photo and the container’s border, a background color, and the aforementioned borders, which only apply to the bottom and right.
Now we have defined a very simple frame, but reminiscent of Polaroid instant photos.
.frame3 {
padding: 8px 8px 20px 8px;
background-color: #ffffff;
width: 200px;
border: 1px solid #999999;
}
We have simply defined some spaces between the photo and the edge of the element, where the space below is greater to emulate the frame of the Polaroids, which was wider below.
Then we have put a border to the container itself so that it stands out against the background of the page, which is also white.
Finally we have created a frame with shadow. This frame with a shadow without using images is quite complicated for us in the HTML code, but even more so in the CSS code. This shadow effect with CSS was already explained in another previous article on .com, so I am not going to give further explanations, but rather the reference to the article:
.blur{
background-color: #ccc; /*shadow color*/
colour: heritage;
margin-left: 4px;
margin-top: 4px;
width: 224px;
}
.shadow, .content{
position: relative;
bottom: 2px;
right: 2px;
}
.shadow{
background-color: #666; /*shadow color*/
colour: heritage;
}
.content{
background-color: #fff; /*background color of content*/
colour: #000; /*text color of content*/
border: 1px solid #000; /*border color*/
padding: .5em 2ex;
}
.content IMG{
border: 1px solid #000000;
}
As we see in the HTML code, three different containers are used, to emulate the gradient effect of the shadow, which is darker close to the object and lighter as the shadow moves away from the object.
We will need to define styles for each of the three containers. The good thing is that, as the styles are defined by CSS classes, we will only have to define them once and we can use them in all the images that we want.
We can on a separate page.
Facebook Comments
Disqus