css - cssで次のエンボス効果を実現する方法

Question

純粋な CSS でこの画像と同じ効果を得ることができますか? 完全に一致している必要はありませんが、イメージに依存しなくて済むように十分に近いものであれば...

ありがとう。グラデーション角度の明度がエッジに向かってカットされているように見えます...そして同じライトグラデーションが上から数ピクセル下に落ちます...

Answer 1

With no css gradients, here's something that's embossed, but not the bevel in your example:

<div style="background:#1d1d88;width:200px;height:50px;border-radius:10px;box-shadow: inset 0px -5px 20px 8px #060618;"></div>

It works best with a little border radius. If you want to add a gradient, I recommend http://www.colorzilla.com/gradient-editor/

Here's a quick class with a gradient:

.bevelish {
    width: 200px;
    height: 50px;
    box-shadow: inset 0px -5px 30px 3px #000052;
    background: #2f2e59;
    background: -moz-linear-gradient(top, #2f2e59 40%, #00003d 60%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#2f2e59), color-stop(60%,#00003d));
    background: -webkit-linear-gradient(top, #2f2e59 40%,#00003d 60%);
    background: -o-linear-gradient(top, #2f2e59 40%,#00003d 60%);
    background: -ms-linear-gradient(top, #2f2e59 40%,#00003d 60%);
    background: linear-gradient(to bottom, #2f2e59 40%,#00003d 60%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2e59', endColorstr='#00003d',GradientType=0 );
}

The key is the inset in the box-shadow, and there's also I believe a 5th parameter you can add, a pixel value, for strength of the shadow, so you can play with the values and try to approach something beveled, but I'm not sure you can make it a "sharp" bevel.