Hi,

Even though photography is just a hobby of mine, I'm a perfectionist. And I'm also really interested in how things work - I've looked at a million web sites, templates, and done plenty of reading, but would rather learn how to make an attractive design myself, than take something somebody else built. It's sort of like the grown-up version of legos.

So ... with that in mind, I've built a web site to display my photography. I have galleries with thumbnails, and then you click through to the full version with info about the image. I've been using Photoshop actions to create the thumbnail frame and a drop shadow for the bigger photo. Ideally I'd like to set up a CSS class for each size ( that means 8x10 and 8x12 in thumbs and web size ) and have it display the image behind a semi-transparent frame.

Thought about continuing on this way, using png files, but even writing some javascript to get around IE 6, the files still wind up being huge! Are gif files the answer here? Am I even on the right track here?

An example of what I'm trying to do - I'm changing my site's BG color (again) and want to make transparent frames like this, if possible?



The big images are a lot simpler - stroke the edge, then use a drop shadow.

Oh, and for the record, this stuff is difficult; you probably don't think about it day to day, but people who create graphics and attractive designs are talented. I say that having struggled with it...

I came up with this:



And I can pull out the photo layer ... but how do I do this with CSS? It seems like I'd create a new class to apply to the thumb image and reference this as a background image ... can I set a negative z-index for the image itself to force it to the back, or ...?

Forrest there are a couple of ways out there to do what you want. The basic idea is to set each of those corner images as the background to an element. The hard part is since you can only set one image in the background per element you need 4 elements.

Here's a couple of links about how it's down. They're each trying to make rounder borders, but the idea is the same as what you want. I think there are other techniques out there that are slight modifications of these.

http://spiffycorners.com/
http://www.spiffybox.com/

Hope they help.

Originally Posted by vangogh

Forrest there are a couple of ways out there to do what you want. The basic idea is to set each of those corner images as the background to an element. The hard part is since you can only set one image in the background per element you need 4 elements.

Thanks so much for the links! I'd like to find a more simple solution, but not sure there is one ... regardless, they're helping me learn. And that's a good thing whether I use this trick immediately or not. ( On that note, I'm not allowed to give you more "talkupation" until I give some to others ... but thanks for the help! )

Is there an easier solution if I have the four corners together in one image? Or, does breaking your code into multiple elements solve the problem of some images are 8x10 and some are 8x12 ... and then some are landscape orientation and some are portrait?

I tried this code, which I though would work, but it doesn't:

<div align="center" style="position:relative">
  <a href="../Photos/StreamInBigBasin.html">
    <img src="../Thumbs/StreamInBigBasin.jpg" alt="Stream, Big Basin" width="238" height="159" style="top:0; left:0" />
    <img src="../GraphicElements/thm812l.png" style="top:0; left:0" />
  </a>
</div>

I'm starting to realize I don't understand html nearly as well as I thought!

Okay, it turned out to be a lot simpler than I had feared. Basically, I've got the corners in a transparent png file, so I display that with an img tag, and set its background image to the thumbnail I want to display. Set it to center, no repeat, and give it a size.

<div align="center">
  <a href="../Photos/DowntownFromFootBridge.html">
    <img src="../GraphicElements/thm812l.png" style="background-image:url(../Thumbs/FootBridgeWithTrain.jpg)" alt="Foot Bridge and Train with Seattle and the Space Needle in the background" class="thm812l" />
  </a>
</div>

AND

.thm812l {
    width:250px;
    height:167px;
    background-repeat:no-repeat;
    background-position:center;
}

( In case that looks cryptic, thm812l is 8x12 landscape format in thumbnail size. I've got a bunch in portrait orientation, so I need to distinguish that as well as size/shape. )

Great thanks to Van Gogh for pointing me in the right direction!

Glad to help. I only have one question. How come when I look at your images of the Rocky Mountains I don't see anything from Colorado? They're beautiful here. In fact they're practically across the street from my apartment.

Originally Posted by vangogh

Glad to help. I only have one question. How come when I look at your images of the Rocky Mountains I don't see anything from Colorado? They're beautiful here. In fact they're practically across the street from my apartment.

Out of curiosity, where in Colorado do you live? I was born in Denver, but my family moved back east to Connecticut when I was too young to remember, and I grew up there. I've been back to CO a number of times, but mostly before I learned how to use a camera. I've got - or hopefully I still have them - a bunch of horrid pictures from Bear Lake, Leadville, Granby...

There are a few photos on my Rocky Mountains page, but now that I have a professional camera and lenses, and a car ( I haven't had one for the past three years ) I'm planning to make a road trip this spring, drive straight out to Montana, and then come down the Rockies until the southern tip of Colorado, and head back home to Seattle. I don't know if you've ever been to Ouray ( other side of the mountains from Durango ), but it's one of my favorite places on earth.

Convincing my job to give me three weeks off for a trip like this will be a challenge, but the two things I love the most in life are exploring new places, and mountains.

These three are from Colorado, but the pages area ugly ... I need to come up with transparent frames for the web sized versions. Luckily I know how this time!

http://forrestcroce.com/Photos/RockyMountainSky.html
http://forrestcroce.com/Photos/OurayCampRoad.html
http://forrestcroce.com/Photos/WaterfallUS550.html

Now I'm feeling nostalgic.

I live in Boulder. I'm originally from New York and I also lived in Connecticut for a couple of years. What part of CT did you grow up in. I lived in Danbury, in a small community that was built around a small lake. It was off rte 7 just south of the Danbury Fair Mall.

Those three pictures definitely look like Colorado, though not my neck of the woods.

Most of my time in Colorado has been spent along the front range on the east side of the Mountains. I've never been to Ouray, but it does look beautiful based on your photos.