Question

I’m creating PHP, Javascript based photo-gallery from scratch

The problem is, I want to make difference between simple picture and photo-album.

So simple picture borders look like that

Is that possible to create facebook like photo-album borders (double borders, which creates multiple images effect) via css or CSS3?

P.S Don’t know if it will be possible with old css standarts. I mean, CSS3 probably can do it but it will not be backward compatible. In other hand, currently my php side generates 100×100 px thumbs. I need something that will not be ruined if I will increase size of thumbs.

Thx in advance

Answer 1

Is this what you’re looking for?

jsfiddle

HTML:

<div class="facebook-album"></div>

CSS:

.facebook-album, .facebook-album:before
{
    background: red;
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 3px solid #FFF;
    box-shadow: 0 0 0 1px #999;
    position: relative;
}
.facebook-album:before
{
    margin: 0;
    content: "";
    position: absolute;
    top: -7px;
    left: -7px;
    background: white;
    z-index: -1;
}