Outset border style

HTML & CSS
1

I guess my question pertains to inset as well, but in reverse…

I have a contact info box floated to the left of a page. I used the OUTSET border style to give the effect that this box with contact info PROTRUDES from background. However, to my dismay, IE does a poor job of displaying outset. So… as a solution I decided to style the border-top, bottom, right and left each SEPARATELY. But I was confused as to what exactly gives the outset its protruding look and Googled, researched, etc about it, but did not come across a satisfying answer.

Let’s say my background for the page is white (ffffff). And the contact box background-color I want to outset is a medium shade of gray(efefef). What colors would I make my LEFT/TOP(light border) OR RIGHT/BOTTOM(dark border) to achieve the OPTIMAL OUTSET look? The hardest part is figuring out if I make the LEFT/TOP borders white? or if I make the LEFT/TOP borders the same color as background-color for contact box(efefef)? or do I make LEFT/TOP borders a lighter shade of gray than the background color for contact box(lighter than #efefef).

If someone could explain the specific art principles in achieving an optimal outset look that would be so grand… thank you in advance.

2

I was reading about this concept in a book called mind hacks recently. In the world we naturally see a light source coming from above. This is why the outset seems to stick out of the page - where the light source is top left and if the block was sticking out of the page towards the viewer the shadow would naturally be cast underneath and to the right.

So it will stick out and look correct if the shadows cast as natural. e.g.


	border-top: 3px solid #ddd;
	border-left: 3px solid #bbb;
	border-right: 3px solid #777;
	border-bottom: 3px solid #555;

The shadow might appear natural because the top is the lightest, bottom the darkest, the others give the position of the light source.

All the best,

3

Ok… so the border color scheme you just gave is static meaning it is the OPTIMAL border color scheme for all cases? Regardless of background-color of page and background-color of the protruding plateau, the border color scheme you just gave is OPTIMAL?

Also, is it safe to assume that inset would be the exact opposite of border color scheme you just gave? Thanks much in advance…

4

I don’t know if an optimal style exists. They are just borders to simulate a beveled edge and show depth of an element by using the familiar way we know light to behave. If you’re wanting to be able to re-use the same style on multiple background colours you could use rgba so that the shadow was just making the color underneath a bit darker e.g.


        border-top: 3px solid rgba(0,0,0.2);
	border-left: 3px solid rgba(0,0,0.3);
	border-right: 3px solid rgba(0,0,0.5);
	border-bottom: 3px solid rgba(0,0,0.5);

I suggest you play with until it looks right, you will know it’s right because your brain already knows how light falls on different objects to show depth.
On second thought the borders on the light side should be lighter than the background because they would be catching more light. maybe something like:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
<style type="text/css" media="screen">
body { background: #CFC1A8 }
div {
	border-top: 3px solid rgba(255,255,255,.5);
	border-left: 3px solid rgba(255,255,255,.3);
	border-right: 3px solid rgba(0,0,0,.1);
	border-bottom: 3px solid rgba(0,0,0,.3);
	
}
</style>
</head>
<body>
<div>&nbsp;</div>
</body>
</html>

a box-shadow give a different perception of depth again - As if the element as a square is lifted toward the viewer.


-moz-box-shadow: 3px 3px 5px rgba(0,0,0,.5);
-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,.5);
5

Good stuff… thanks again.

6

I once experimented with it:

page

page

7

double thanks Luki…

8

No prob. It’s old stuff i cooked up in 2004 but maybe it comes in handy :slight_smile: