Sprucing up images with CSS borders
If you're familiar with HTML and CSS, you'll be aware of the fantastic HTML property align="right" and the CSS equivalent float: right;. These allow you to place an image (or other object) on the left or right border of the containing object, with the rest of the text on the page flowing neatly around it. This is fantastic for embedding graphics in a page and giving the same sort of effect as a printed publication. The float method can also be used for page layouts, but we'll be concentrating on floating images here.
The trouble is, just floating an image often isn't enough to make it look good, no matter what image you're using. For instance, the image on the right has been given a very simple float: right treatment. Not bad, but we could do so much more. For a start, the image has no padding between itself and the text, so depending on your browser setup you may find that text is butting right up next to the image, which makes it all look rather claustrophobic. We can take it much further with CSS though, giving the image a stylish border as well.
For the demonstrations below I'm not going to float the images, as it'll get in a horrible mess (as you'll know if you've ever tried to create a float-heavy web page). But hopefully using a combination of floating and the border effects below you'll be able to make your images stand out more.
1. A very simple border
Possibly the simplest border ever, this uses a single solid line around the image. We will give it a small margin too, though because the image below isn't actually floated you probably won't notice the difference there.
style="border: 1px solid black; margin: 10px;"
2. A more stylish simple border
The black border was rather harsh, so let's now make that a lighter grey, and put some padding between the image and the border.
style="border: 1px solid #c0c0c0; padding: 2px; margin: 10px;"
3. Going dotty
You don't have to be restricted to a solid line, of course. A 1px dotted line is actually quite nice, as it gives a very light border effect. You will probably need to make the colour a little darker to compensate though.
style="border: 1px dotted #b0b0b0; padding: 3px; margin: 10px;"
For something a little bolder, try a larger border size - the dots will be displayed bigger, which can be quite a cool effect.
style="border: 3px dotted #a0a0c0; padding: 3px; margin: 10px"
4. Cut here please
Similar to the dotted style, you can also have a dashed style which is almost the same but using dashes rather than dots. Obviously.
style="border: 2px dashed #909090; padding: 2px; margin: 10px;"
5. 3D effects
CSS does come with a primitive 3D awareness. If you remember what HTML tables and 90s web sites looked like, you'll know that you can easily get a bevelled look to cells, and the same applies to images. Different browsers treat it differently, which is a pain, but the idea is that you tell it what colour to base the border on, tell it what sort of 3D effect to give it, and it will automatically put borders in to emulate a shadow and highlight.
style="border: 2px outset #a0a0a0; margin: 0;"
There is also 'inset' (which is the inverse of 'outset'), 'groove' and 'bevel' (which only really work with border widths of 2px or more). The last two are a little difficult to see on a white background, so I'll give it a slight background colour so you can hopefully see it working (not guaranteed as it depends on how your browser chooses to render the colours).
style="border: 4px inset #a0a0a0; margin: 10px;"
style="border: 2px groove #909090; padding: 4px; margin: 10px;"
style="border: 2px ridge #909090; padding: 4px; margin: 10px;"
5. A little more control
The 3D effects above are fine, but they lack the level of control that most good web designers would want. A better approach is to style each border individually, allowing you to mix and match various effects to suit what you're trying to do. Below are a few examples, which may look horrible on this site but may well fit in really well on other site designs.
style="border: 1px solid #c0c0c0; border-bottom: 3px solid #ffa000; padding: 2px; margin: 10px;"
style="border: 1px dotted #606060; border-left: 20px solid #a03030; margin: 10px;"
style="background: black; padding: 0 1px 1px 0; border-top: 1px solid #c0c0c0; border-left: 1px solid #a0a0a0; border-right: 1px solid #909090; border-bottom: 1px solid #808080; margin: 10px;"
style="border-top: 10px outset #000090; border-bottom: 10px inset #000090; border-left: 10px solid white; border-right: 10px solid white; margin: 10px;"
Matthew
Write a comment
- Required fields are marked with *.