StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I would not manipulate the images using GD or imagemagick but instead put a [css border][1] on the image or a div behind the image that's slighly bigger than the image.</p> <p>Either you put a border on every picture using css :</p> <pre><code>img { border: 2px solid #000; } </code></pre> <p>Or you can define some border classes likes this :</p> <pre><code>.border1 {border: 1px solid #000} .border2 {border: 2px solid #000} .border3 {border: 3px solid #000} </code></pre> <p>and then use on your images :</p> <pre><code><img src="..." class="border1"></img> </code></pre> <p>or</p> <pre><code><img src="..." class="border3 "></img> </code></pre> <p><strong>edit :</strong> if you were using scss/sass you could even do something like :</p> <pre><code>@for $i from 1 through 10 { img.border_#{$i} { border: #{$i}px solid #000; } } </code></pre> <p>Sass rocks !</p> <p>About the colors :</p> <pre><code>.bMainColor{border-color:#ff0000;} .bSecColor{border-color:#00ff00;} .bThirdColor{border-color:#0000ff;} </code></pre> <p>and on the img tag :</p> <pre><code><img src="..." class="border1 bMainColor"></img> </code></pre> <p>I guess there are so many ways to use css :)</p> <p>References about borders :</p> <p><a href="http://www.w3.org/TR/CSS2/box.html#border-properties" rel="nofollow">http://www.w3.org/TR/CSS2/box.html#border-properties</a></p> <p><a href="http://reference.sitepoint.com/css/bordersoutlines" rel="nofollow">http://reference.sitepoint.com/css/bordersoutlines</a></p> <p><a href="http://www.w3schools.com/css/css_border.asp" rel="nofollow">http://www.w3schools.com/css/css_border.asp</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload