Photos are all over the internet. Someone [or some thing] puts them there with HTML code most generally. This is usually done with a piece of code in HTML known as . The img tag as we’ll refer to it in this post is most generally used to display images on a page but often the image is left bare and raw and causes the page to look ever so BLAH.

Using the techniques below we’ll look at how to add a little spice and style with CSS (Cascading Style Sheets). We will also go over a few do’s and don’ts of the industry which have helped me become a better designer over the years.

Understanding the Box Model

Knowing options for what you are doing would be the first thing I’d recommend for any task, especially one for HTML. The dimensions of any HTML element are as follows (understanding this will help you with all HTML tags.):

Here we see that total width is relative to a view different styling options. First the margin, second the border, and third the padding, only then is the width of the content figured in. As of recent years in XHTML and HTML 5 the total is calculated by adding each of these. In a situation where an image is specifically 100 pixels by 100 pixels, one would assume that said image can be placed in spot that is 100×100 in dimension. This is true unless we have one of the options configured as non-zero. Lets use the following css example:

img { margin: 0 10px; border: 1px solid #000; padding: 5px; width: 100px; height: 100px; }

The above would in face set the width of the image to 100 pixels. But the total would actually be set to 132 pixels in width. The reason for this is because we asked the container to have 10 pixels of spacing on each site (right and left), 1 pixel of border on each side (left and right), and 5 pixels of padding on each side (you guessed it left and right). The height however would have a total of 112 pixels because our margin (top and bottom) were specified as 0 where the padding (top and bottom) inherited 5 pixels each.

Yes I agree, but why?

You might be asking yourself (depending on your level) why are you going over these basics of HTML Box Modeling with me when you said this blog post was about Image styling. The answer is that we’ll use these basic principles to develop a nice looking image container without having to wrap it in another container such as a div.

First lets start with what we know for fact already and apply these things to our image one by one:

We need a basic image to play with:

Testing 1 2 3 4 5. This is my test text.

We don’t want to bunch our image against our text so we apply the following style to our img tag:

img { float: left; margin-right: 10px; margin-bottom: 10px; }

and if we wanted to float the image to the right we’d do the opposite as follows:

img { float: right; margin-left: 10px; margin-bottom: 10px; }


now our image moves away from our text by 10 pixels and anything that wraps under our image also gets a margin of 10 pixels. This is where most people (in my opinion) make their first mistake with CSS. They use padding instead of margin. It works but limits you in so many ways which I’ll explain in the next few steps.

Next lets give our image a border that looks nice perhaps a darker grayish color that isn’t too dark (but not too light either). In this case we add the following extra text to our code:

img { float: right; margin-left: 10px; margin-bottom: 10px;
border: 1px solid #555;}

in some cases we might want to do 2 pixel border instead of 1 but for now this will do nicely. Our result is as follows:

Now our image has a nice border around what might otherwise blend into the already light background of the page. Next we add a little padding to give it a nice space gap from border and content like so:

img { float: left; margin-right: 10px; margin-bottom: 10px; border: 1px solid #555; padding: 5px; }

More or less might be called for depending on the size of your photo and how big you want the “Frame”. While we are at it let’s go ahead and add a background to the image (You can do that and it really creates a nice touch):

img { float: left; margin-right: 10px; margin-bottom: 10px; border: 1px solid #555; padding: 5px; background: #fff; }

Now we get the following result:

Now we can spice it up with any CSS that we want. We can add Border shadow around the box with the following:

img {
-webkit-box-shadow: 3px 3px 5px rgba(45, 45, 45, 0.75);
-moz-box-shadow: 3px 3px 5px rgba(45, 45, 45, 0.75);
box-shadow: 3px 3px 5px rgba(45, 45, 45, 0.75);
}


or perhaps rounded corners on the photo:

img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}


or even a gradient for the background (or try this what about another image as the background. Note you can only see what you pad of the image but still it should give you some ideas):


img {
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}


Regardless of what you do remember this above all else

• Less is more – keep it subtle and simple
• Always keep spacing between your content wording and your images
• There is no right or wrong, you can make them look however you want

Follow these tricks and you’ll have nice (and simple) images using very minimal results and just a touch of CSS.