Polaroid Effect

When designing a website, it is very important to use techniques that catch the eye of whoever is navigating through your website. You can use the layout, colors, shapes, and pictures to do this. However, if you do not add a bit of pizzazz to these things your website will look decent, but still have a sense of blandness to it.

Thats why, today, I am going to teach you how to use a polaroid effect on pictures that you can use to create a picture menu, or even just to make one picture look a bit more interesting.

 

1. First, add the picture(s) you would like to add the affect to in a div tag. The HTML code for that is:

<div id=”polaroid”>

<figure>

<img src=”example.jpg” width=”200″ height=”200″ />

<figcaption>Pretty red mushroom</figcaption>

</figure>

</div>

 

  • The <figure> tag specifies that the content is self-contained, and will essentially keep each picture you use grouped by itself.
  • The <img> tag is what contains the picture you are using.
  • The “src” attribute is the source, or file name, of the picture you want to use.
  • The “height” and “width” attributes set the size of the picture. If you are using multiple pictures, you will want to set each picture with the same height and width so they all are symmetrical.
  • The <figcaption> tag creates the caption you want for the specific image you put in the <figure> tag.

Each picture you use will need its own figure tag.

 

2. Now, for the code to add style. This will be placed in a cascading style sheet.

figure, figcaption

{

display:block;

}

#polaroid

{

padding:20px 10px;

}

#polaroid figure

{

float:left;

margin:10px 20px;

}

 

  • “display:block;” creates a block-style element. Basically, it is just normal like paragraphs and headers are.
  • “padding:20px 10px;”  sets the distance between the picture and the border. the first number sets the top and bottom distance. the second number sets the left and right distance.
  • “float:left;” places all of the images you use in a horizontal line. If you do not want them in a horizontal line you can change the property to whatever you please.
  • “margin:10px 20px;” sets the space between each image.

3. Next, what we have all been waiting for! This is how you create the actual polaroid effect on each picture, which will also be added to your cascading stylesheet.

#polaroid figure

{

padding: 6px 8px 10px 8px;

background: #eee6d8;

-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);

-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);

box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);

}

 

  • “padding:6px 8px 10px 8px;” sets the top, left, bottom, and right size of the frame in that order.
  • The background property sets the background color. You can choose whichever color you wish, but that is the one most realistic to an actual polaroid.
  • the three box-shadow properties give the photos a look that seems as if they are real polaroids by creating a small shadow around the picture. This essentially just makes it look 3-D instead of just a flat picture with a border around it.

 

That is all! I hope this helps you all out and makes your web design experience a bit easier!

 

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s