Create a "inset" effect using CSS in websites
I am very much impressed by the "inset" like effect in many latest websites. Some examples are
and
The line in the center. Nowadays, many websites use these kinds of lines/effects.
I tried to achieve the same with borders but the color combination is not working me and it is not proper.
Do other websites use images for these ? is it easy to this ?
Any example css ?
Example sites: http://woothemes.com, http://net.tutsplus.com/ , http://www.w3schools.com (in the header) and in wordpress admin page sidebar
Answer
Don't know if this will help, but using 1 px borders that are slightly lighter and darker than the background of 2 adjacent elements can emulate this. For Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type="text/css">
div{background:#555;}
.top{border-bottom:#333 solid 1px;}
.bot{border-top:#777 solid 1px;}
</style>
</head>
<body>
<div class="top">this</div>
<div class="bot">andthis</div>
</body>
</html>
EDIT:
As a side note, switching light and dark in the example above will give you a slightly raised/embossed border effect.