Create a “inset” effect using CSS in websites

Question

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 webs

Answer 1

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.

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

Answer 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 ;)