Create a "inset" effect using CSS in websites

K

8

10

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

Kaykaya answered 15/6, 2010 at 13:56 Comment(3)

Give us the URL for the examples and we can find you example CSS - that's how the web works :) – Unfathomable 15/6, 2010 at 13:58

I take it you've tried border-style:groove; and found it lacking? – Arsonist 15/6, 2010 at 14:1

Here's a neat variation: dabblet.com/gist/1609945 – Tabescent 14/1, 2012 at 2:59

P

17

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.

Pardo answered 15/6, 2010 at 14:12 Comment(0)

I

4

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:

body{
	background-color: #8080C0;
}
div{
  display: inline-block;
	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;
}

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

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

Interstate answered 15/6, 2010 at 14:23 Comment(0)

K

4

Using an <hr> is quite clever.

Following up on user1302036’s answer, all we need is to set the color of the top and bottom borders for an <hr> and set the left and right border widths to 0.

hr {
  border-width: 1px 0px;
  border-color: #666 transparent #ccc transparent;
}

Kape answered 2/8, 2012 at 17:4 Comment(1)

Did you try it? – Mocambique 12/10, 2017 at 12:57

L

4

Use border-bottom and box-shadow.

body {
  background-color: #D0D9E0;
}

h1 {
  border-bottom: 1px solid #EFF2F6;
  box-shadow: inset 0 -1px 0 0 #AFBCC6;
}

Check out the Fiddle and Browser Compatibility for box-shadow property.

Liggins answered 22/9, 2014 at 19:2 Comment(0)

F

2

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.

Firstling answered 15/6, 2010 at 14:53 Comment(0)

M

2

Simply do the following:

.hr {
  opacity: 0.2;
  border-top: 1px solid #000;
  border-bottom: 1px solid #fff;
}

Play with opacity and colors to suit your design, It works on all backgrounds I think ;)

Mckinnie answered 16/2, 2014 at 15:47 Comment(0)

E

1

Easiest, draw an horizontal rule

with the following styles, contrast can be modified depending on background color:

hr {
background-color: #000;
border-top: solid 1px #999;
border-left: none;  
height:0px;
}

Enugu answered 21/6, 2012 at 21:37 Comment(0)

C

1

Here is a more current and flexible solution that can be used.

JSFIDDLE

.hr {
  background: rgba(0, 0, 0, 0.6);
  height: 1px;
  width: 100%;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

<span class="hr"></span>

By using RGBA(Red, Green, Blue, Alpha) you can use white/black with an alpha(opacity) to make the illusion of an inset effect.

Counterchange answered 24/10, 2013 at 23:51 Comment(0)

Recommended topics

Hot tags