CODEWITHSUNDEEP
css
ducklin5
ducklin5

Reputation: 95

How to smooth emboss in css

I've have been trying to make an styled div that would look like this picture but i have come up with nothing close, should i use the 'box-shadow' style in css, or is there another way.

I started out with photoshop, I thought it would be easy to change to css, but clearly its not. here is the photoshop file (.psd)

------------------- edit ---------------------

I created another embossed layer in photoshop but this time with shadows and glows.

Then i used CSS3Ps to change it into css code, what i got was:

body{ 
    background-color: #949494;}
.shape4{
    width: 300px; 
    height: 44px;
    -webkit-border-radius: 10px;
    -moz-border-radius: l0px; 
    border-radius: 10px;
    background-color: #949494;
    -webkit-box-shadow: 0 0 20px rgba(31,31,31,.2),
        5px 9px 10px rgba(224,224,224,.65),
        inset 5px 9px l0px rgba(31,31,31,.6),
        inset 0 0 25px rgba(224,224,224,.25);
    -moz-box-shadow: 0 0 20px rgba(31,31,31,.2),
        5px 9px 10px rgba(224,224,224,.65),
        inset 5px 9px 10px rgba(31,31,31,.6),
        inset 0 0 25px rgba(224,224,224,.25);
    box-shadow: 0 0 20px rgba(31,31,31,.2),
        5px 9px 10px rgba(224,224,224,.65),
        inset 5px 9px 10px rgba(31,31,31,.6),
        inset 0 0 25px rgba(224,224,224,.25);}

Unfortunately there is no glow effect (thus making it less smooth)... how can i fix this?

Upvotes: 0

Views: 11200

Answers (1)

Leaf
Leaf

Reputation: 610

You would just use 3 divs and box-shadows, like this:

FIDDLE

CSS

#embossedboxbefore {
background-color:#777;
    width: 210px;
height: 60px;
top:0px;
left:0px;
  position:absolute;
-webkit-box-shadow: -1px -1px 8px 3px rgba(119,119,119,1);
-moz-box-shadow: -1px -1px 8px 3px rgba(119,119,119,1);
box-shadow: -1px -1px 8px 3px rgba(119,119,119,1);
}
#embossedbox {
background-color:#949494;
width: 200px;
height: 50px;
top:5px;
left:5px;
position:absolute;
-webkit-box-shadow: 0px 0px 15px 3px rgba(148,148,148,1);
-moz-box-shadow: 0px 0px 15px 3px rgba(148,148,148,1);
box-shadow: 0px 0px 15px 3px rgba(148,148,148,1);
}
#embossedboxafter {
background-color:#a5a5a5;
    width: 205px;
height: 55px;
top:5px;
left:5px;
  position:absolute;
-webkit-box-shadow: 2px 2px 8px 2px rgba(165,165,165,1);
-moz-box-shadow: 2px 2px 8px 2px rgba(165,165,165,1);
box-shadow: 2px 2px 8px 2px rgba(165,165,165,1);
}

HTML

<div id="embossedboxbefore">
</div>
<div id="embossedboxafter">
</div>
<div id="embossedbox">
</div>

Method Two

In this instance, you'd only use one div and multiple box-shadows. To use multiple box shadows, you simply put a comma after the first shadow's parameters - on the same line still - and enter the second shadow's parameters. The shadows are stacked in reverse order from the position you write them in; the last shadow you create on the line will be on top, and the first shadow in the line will be on the bottom.

I couldn't get it to look quite right in the JSFiddle, but you could try messing with the parameters to get it to look better. I'm just giving you possible solutions, not desinging it for you.

FIDDLE

CSS

#embossedbox {
background-color:#949494;
width: 200px;
height: 50px;
top:5px;
left:5px;
position:absolute;
-webkit-box-shadow: 0px 0px 10px 4px rgba(148,148,148,1),-4px -6px 15px 4px rgba(119,119,119,1),5px 6px 15px 3px rgba(165,165,165,1);
-moz-box-shadow: 0px 0px 10px 3px rgba(148,148,148,1),-4px -6px 15px 4px rgba(119,119,119,1),5px 6px 15px 3px rgba(165,165,165,1);
box-shadow: 0px 0px 10px 4px rgba(148,148,148,1),-4px -6px 15px 4px rgba(119,119,119,1),5px 6px 15px 3px rgba(165,165,165,1);
}

HTML

<div id="embossedbox">
</div>

Upvotes: 3

Related Questions