Creating a simple Polaroid style gallery is much easier than you many think just using CSS and HTML. For the purpose of this example, I must say that the gallery works best with a small number of pictures. Basically you could add a high volume of pictures, but you will need to modify the CSS to account for the volume you want to work with. In my example I have six photos in order to best demonstrate the concept. If you’re just starting with CSS then be sure to check out the WC3 Cascading Style Sheets reference and you may want to consider purchasing Beginning CSS for Web Design.
The first step is to create a div wrapper that will contain the photos which is named photo-gallery and will hold the photos.
<h1><span>Microsoft PDC 2009</span></h1> <a href="#" class="large polaroid img1"><img src="pdc-2009-01.jpg" alt="">PDC #1</a> <a href="#" class="medium polaroid img2"><img src="pdc-2009-02.jpg" alt="">PDC #2</a> <a href="#" class="large polaroid img3"><img src="pdc-2009-03.jpg" alt="">PDC #3</a> <a href="#" class="medium polaroid img4"><img src="pdc-2009-04.jpg" alt="">PDC #4</a> <a href="#" class="large polaroid img5"><img src="pdc-2009-05.jpg" alt="">PDC #5</a> <a href="#" class="medium polaroid img6"><img src="pdc-2009-06.jpg" alt="">PDC #6</a> </div>
Notice that there is a few styles applied to the various child elements of the div. The first thing we will look at is positioning, width, height, and colors.
To obtain the Polaroid effect the following CSS is needed.
.photo-gallery {
position: relative;
width: 80%;
margin: 0 auto;
max-width: 70em;
height: 450px;
margin-top: 5em;
min-width: 800px;
max-width: 900px;
}
.photo-gallery .polaroid {
position: absolute;
}
.photo-gallery h1 {
position: absolute;
z-index: 5;
top: 150px;
text-align: center;
width: 100%;
line-height: 1.9;
}
.photo-gallery h1 span {
background-color: white;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
padding: 0.4em 0.8em 0.3em 0.8em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
border: 5px solid #000000;
}
The last piece of the puzzle is the styles to define the photo size and positions. In this example there are small, medium, and large.
.photo-gallery .small {
width: 75px;
padding: 6px 6px 12px 6px;
font-size: 0.6em;
}
.photo-gallery .small img {
width: 75px;
height: 75px;
}
.photo-gallery .medium {
width: 200px;
padding: 13px 13px 26px 13px;
font-size: 0.8em;
}
.photo-gallery .medium img {
width: 200px;
height: 200px;
}
.photo-gallery .large {
width: 300px;
padding: 20px 20px 30px 20px;
font-size: 1em;
}
.photo-gallery .large img {
width: 300px;
height: 300px;
}
.photo-gallery .img1 {
bottom: 60px;
right: 565px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
.photo-gallery .img2 {
top: 220px;
right: 20px;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.photo-gallery .img3 {
left: 250px;
top: -20px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.photo-gallery .img4 {
top: 210px;
left: 215px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.photo-gallery .img5 {
bottom: 100;
right: 0;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
transform: rotate(1deg);
}
.photo-gallery .img6 {
bottom: 10px;
right: 256px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
}
a:hover,
a:focus {
z-index: 5;
}
When it all said and done you end up with a gallery that is interactive as the photo picks up focus from the mouse movement. It is important to note that this photo gallery will present issues for those using assistive technology.


Are you looking to add your favorite television show or movie to your collection? If so, then I have a solution that you may be interested in. Now it is important to say that I do not advocate violating copyright laws, so be sure what content you are interested in capturing is legal to do so.








Recent Comments