ansaurus

Question

Create a "inset" effect using CSS in websites

Answer 1

A:

Woot Themes uses a background image with the inset effect along the top edge: http://www.woothemes.com/wp-content/themes/woo2/images/bg-featured.jpg

The Nettutes+ site also uses a background image, but with the inset in the middle: http://net.tutsplus.com/wp-content/themes/tuts/images/global/header.png (it is so thin because it repeats horizontally)

LeguRi 2010-06-15 14:10:57

saw in many websites but just listed some. planning to use this technique in my new site

Aakash Chakravarthy 2010-06-15 14:18:22

Answer 2

+2 A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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.

edl 2010-06-15 14:12:35

Very clever! +1

LeguRi 2010-06-15 14:13:45

Answer 3

+2 A:

3D effects in 2D computer displays are mere optical effects accomplished by the use of colour: lighter variations suggest bright (higher areas) and darker variations suggest shadown (lower areas). Most people is right-handed and writing lights tend to be on the left side of the desktop, so you use an imaginary source of light in the left top corner of the screen.

It's been possible to do it with pure CSS in rectangular areas for years:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head><title></title>
<meta name="Author" content="Softeca Internet">
<style type="text/css"><!--
body{
    background-color: #8080C0;
}
div{
    margin: 1em;
    padding: 1em;
    width: 25%;
    color: white;
    background-color: #8080C0;
}
div.outset{
    border-width: 1px;
    border-style: solid;
    border-color: #A6A6D2 #4D4D9B #4D4D9B #A6A6D2;
}
div.inset{
    border-width: 1px;
    border-style: solid;
    border-color: #4D4D9B #A6A6D2 #A6A6D2 #4D4D9B;
}
--></style>
</head>
<body>

<div class="inset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="outset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

</body>
</html>

Fonts, however, require newer CSS attributes that don't have wide support yet and, also, do not allow to provide more than one colour, so it's common to use images. See http://www.quirksmode.org/css/textshadow.html

Álvaro G. Vicario 2010-06-15 14:23:10

Answer 4

+1 A:

this is css text shadow property.for get this effect use

.style{
    text-shadow:0 1px #FFFFFF;
}

but really this is effect of color combination that you are using in background and text. so you should do.

use text shadow color dark than background color.
use text shadow color light than text color.

kc rajput 2010-06-15 14:53:15

ansaurus

tags:

views:

answers:

Create a "inset" effect using CSS in websites

related questions