Still Life

When we worked on a CSS image grid last summer, I thought later I'd complete a second version using sprites to show you how that approach can improve performance. I should make notes to myself about loose ends like that because somewhere along the way, I forgot about it. Last week, an email about the original grid reminded me.

The grid post is popular, the sprite change is easy enough, so let's implement it. By the way, the grid above is a real-time working example generated through HTML included within this post and styles that come from a style sheet. Each thumbnail is clickable but needs a URL assigned to its a element before it'll take you somewhere.

The thumbnail images are still life on black, which is a hobby of mine. I had to crop some of them quite a bit in order to fit them here. Images were saved in low resolution to speed up things for the web.

I made a new copy of the old CSS styles just to keep things from tangling with each other. Most of the code is recycled so for detailed explanations, see this previous post. I posted several times on sprites before if you need help to figure out what those are about.

Keep in mind that my space on the blog is limited to 550 pixels, you can adjust the width to fit your requirements and increase the number of columns of your grid as you wish. You'll find the markup at the end of the CSS.

ul.imggrid {
  padding: 0;
  list-style: none;
  margin: 0 auto;
  width: 495px;
  }

.imggrid li {
    float: left;
    padding: 1px;
    border: 1px solid #cbcad0;
    margin: 0 5px 10px 5px;
    } 

.imggrid_display {
   padding: 20px;
   margin: 0 auto;
   width: 513px; 
   /*these two properties will be inherited by .portfolio h2 and .portfolio p */
   font-family: 'GraublauWeb', arial, serif; 
   text-align: center;
  }
  
  /* .post-body is only for those who are on Blogger, or all others please skip 
     it and write your selector as "div.imggrid_display h2" without the quotes
  */
  .post-body div.imggrid_display h2 {
     padding: 0; margin: 0;
     clear: both;
     font-size: 35px;
     font-weight: normal;
     color: #58595b;
     background: none;
     font-family: 'GraublauWeb', arial, serif;  
     /* reset for cascade effects that are trickling down to me 
       from other h2's 
    */
     text-transform: none;
     letter-spacing: normal;
     }
  
  .imggrid_display p {
      margin:0; padding: 0;
      font-size: 15px;
      color: #58595b;
      }
  
/* sprites for imggrid */
.imggrid a {
    background: url('images/spritebitmaps.jpg') no-repeat;
    height: 150px;
    width: 150px;
    display: block;
    }

/*sprites*/
.imggrid a#col1 {background-position: 0 0;}
.imggrid a#col2 {background-position:  -150px 0;}
.imggrid a#col3 {background-position: -300px 0;}
.imggrid a#col4 {background-position:  -450px 0;}
.imggrid a#col5 {background-position:  -600px 0;}
.imggrid a#col6 {background-position:  -750px 0;}
.imggrid a#col7 {background-position:  -900px 0;}
.imggrid a#col8 {background-position:  -1050px 0;}
.imggrid a#col9 {background-position:  -1200px 0;}
/* end sprites for imggrid */
/* end imggrid block */

Important note for the CSS: .post-body is only for those who are on Blogger, All others please skip it and write your selector as div.imggrid_display h2

Fill in your own URLs for the a href's. The markup:

<div class="imggrid_display">
<ul class="imggrid">
<li><a id="col1" href="#"></a></li>
<li><a id="col2" href="#"></a></li>
<li><a id="col3" href="#"></a></li>
<li><a id="col4" href="#"></a></li>
<li><a id="col5" href="#"></a></li>
<li><a id="col6" href="#"></a></li>
<li><a id="col7" href="#"></a></li>
<li><a id="col8" href="#"></a></li>
<li><a id="col9" href="#"></a></li>
</ul>
<h2>Still Life</h2>
<p>© Copyright 2011 | www.cssbakery.com | All Rights Reserved</p>
</div>

THE "SPRITE" FILE

All the images used in forming the grid reside in the same file avoiding multiple GETs which saves time and loads the page smoother. I did not leave any space between my images but for clarity and ease of edit, you might want to include at least a single line as a separator between yours.

Since my images are each 150 pixels wide and stacked next to each other with no separator space, I shift the sprite file by a factor of 150 times the order of each image in the file to get to that image.

To give you an example, the red tulip is fifth in line so I multiply 150 by (5-1). I subtracted 1 since we start counting from zero. In other words, I have to shift the background image by 600 pixels to get to the tulip.

The background position x value is negative at -600 pixels because we want to pull the image to the left. If it helps any, think of the negative x axis from school. You are pulling the parts of the image that you don't want into that quadrant and showing only a portion of the remaining in the positive quadrant.

Explaining Sprite Shifting in Background Image

NTH CHILD OF CSS3

We can improve the CSS by including the nth-child construct from CSS3. It will simplify both the CSS and the markup. Off the top of my head, I couldn't tell you how widespread it's implemented in browsers, except that Firefox 3.5 and greater supports it and IE8 and below doesn't. The fact that IE8 does not support it is a dealbreaker and the reason why we cannot use in official code yet. There are still a lot of users running Windows XP, which does not support IE9. Anyway, I will show you how the nth child works in a separate post.

CSS Image Grids

AN IMAGE GRID FOR YOUR WALL

This has nothing to do with software but the idea is very similar to the grid that we just talked about with the only difference being where the images go - on a computer screen or a wall. If you have a collection of pictures - with the proliferation of digital cameras who doesn't these days - you can print them on canvas with a wide format printer. Once the prints are made, stretch them on ready-made canvas frames. Arrange the finished pictures in a grid on a bare wall and surround the arrangement with a hollow but complete frame. No need for glass, matting, or mounting. Finish it off with a picture light.