How to make 3D effect to a box container and how to choose colors?

Question

How do I make the design of this box better? Making its header and footer 3D, better choice colors, ...

I've tried this:

Here is its related code:

.boxfooter {
  display: block;
  border: 1px solid #eee;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: #fbfcfa;
  margin:0 0 0 0;
  padding: 1px;
  color:#8EA2AA;
}
.boxheader{
  margin:6px 0 0 0;
  font-size:20px;
  display: block;
  border: 1px solid #eee;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  background-color: #fbfcfa;
  margin:0 0 0 0;
  padding:4px;
}
.box {
  background-color:#fbfcfa;
  overflow-y:scroll;
  display: block;
  margin:0 0 0 0;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  padding: 10px;
  color: #333;
}

Answer 1

Check the demo below.

Fiddle

I used the gradient generator to have this effect.

Also if you want to have effect, wrap them up then add this code to the wrapper.

.box-wrapper {
    box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5); 
}

For engraved effect you can try the css below.

.box-wrapper {
    box-shadow:-1px -1px 1px rgba(0, 0, 0, 0.5);
}

To adjust the lightness/darkness of the shadow. Just replace the rgba's 0.5 and chooose a number from the range of 0.1 to 1.0.

0.1 - lightest 1.0 - darkest

Answer 2

if you want it to stand out more, go for something like a box-shadow.

box-shadow:0 0 10px #000000;

and as for colours, that's totally up to you, just experiment, and look up HEX colour codes