Double borders in CSS

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

enter image description here

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

enter image description here

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 100x100 px thumbs. I need something that will not be ruined if I will increase size of thumbs.

Thx in advance

score 5 · Answer 1 · edited May 23 '17 at 12:34

5

~~Use a pseudo element like :before or :after, for example:~~ Turns out, most browsers don't like :before on images because it's not a text-containing element. You could still do this if you did it on an alternative element, like a div, and set the div's background to the original image. Or, you could try: http://jsbin.com/otivaj/edit#html,live

edited May 23 '17 at 12:34

Community

1
1

answered Mar 12 '12 at 17:39

Thomas Shields

8,874
5
42
77

@epic_syntax sure, gimme a minute or so. – Thomas Shields Mar 12 '12 at 17:46

score 4 · Accepted Answer · edited Mar 12 '12 at 18:03

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;
}

score 1 · Answer 3 · answered Mar 12 '12 at 17:41

1

You could just look at Facebook's source to figure it out. This will also work:

http://jsfiddle.net/g9A6a/

answered Mar 12 '12 at 17:41

Explosion Pills

188,624
52
326
405

It's not? that looks absolutely perfect. What exactly is the problem? – Explosion Pills Mar 12 '12 at 17:54

score 1 · Answer 4 · answered Mar 12 '12 at 17:42

Yep, you can definitely do this with CSS. It looks like all your images are the same size, too, which will make this very straightforward. Simply place your <img> inside a containing element with position: relative; and an offset. Both the container and image should have a border, with padding and offsets you so desire. Set the width and height of the containing element based off the child image's dimensions.

Here is a DEMO on jsfiddle

score 0 · Answer 5 · answered Mar 12 '12 at 17:45

I'm not sure you can achieve that effect with simply CSS2. If adding more markup is an option, I would do something like this:

<ul>
<li><img></li>
</ul>

li {
    position: relative; 
    border: 1px solid gray;
}
img {
    padding: 6px;
    border: 1px solid gray;
    position:absolute;
    top:6px;
    left: 6px;
    background-color:white;
}

Double borders in CSS

5 Answers5