Как сгладить тиснение в css

Question

Я пытался создать стилизованный div, который будет похож на эту фотографию, но я ничего не придумал, должен ли я использовать стиль «box-shadow» в css или там другой путь.

• http://golem.tk/pictures/embossed.jpg

Я начал с фотошопом, я думал, что это будет легко изменить в CSS, но явно его нет. вот файл Photoshop (.psd)

• golem.tk/pictures/embossed.psd

------------------- редактировать ---------------------

Я создал еще один слой с тиснением в фотошопе, но на этот раз с тенями и сияниями.

• http://golem.tk/pictures/embossed2.psd

Тогда я использовал CSS3Ps, чтобы изменить его в CSS код, что я получил, был:

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

К сожалению, нет никакого эффекта свечения (что делает его менее гладкой). .. Как я могу это исправить?

Answer 1

Вы бы просто использовать 3 дивы и box-shadows, как это:

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> 

Метод Два

В этом случае вы должны использовать только один div и несколько теней. Чтобы использовать несколько теней коробок, вы просто добавляете запятую после параметров первой тени - в той же строке - и вводите параметры второй тени. Тени складываются в обратном порядке с позиции, в которую вы их записываете; последняя тень, которую вы создаете на линии, будет сверху, а первая тень в строке будет внизу.

Я не мог заставить его выглядеть совершенно правильно в JSFiddle, но вы можете попробовать испортить параметры, чтобы он выглядел лучше. Я просто даю вам возможные решения, не желая этого для вас.

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>