Boxshadow вставка не может воссоздать из Photoshop

Question

Итак, вот что ему нужно, чтобы выглядеть

Вы видите, что хороший белый эффект по центру, я попытался воссоздать, но без каких-либо Succes вот мой код:

article .txt:after{ 
    position:absolute; 
    content:''; 
    width:50px; 
    height:50px; 
    top:50%; 
    left:35%; 
-webkit-box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.1); 
    -moz-box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.1); 
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.1); 
    } 

Answer 1

Вам не хватает радиуса распространения в вашей декларации CSS. То есть, он должен выглядеть примерно так (обратите внимание, что в каждом из определений коробчатых теневых есть новый «20px» номер):

article .txt:after{ 
    position:absolute; 
    content:''; 
    width:50px; 
    height:50px; 
    top:50%; 
    left:35%; 
    -webkit-box-shadow: inset 0px 0px 10px 20px rgba(255, 255, 255, 0.1); 
    -moz-box-shadow: inset 0px 0px 10px 20px rgba(255, 255, 255, 0.1); 
    box-shadow: inset 0px 0px 10px 20px rgba(255, 255, 255, 0.1); 
} 

Я также сделал быстрый макет в JSFiddle, вы можете увидеть его здесь: http://jsfiddle.net/ZEuZ6/

Answer 2

С изображения, похоже, что вы хотите не тень, а градиент.

Некоторые хорошая информация о градиентах: http://davidwalsh.name/css-gradients

Answer 3

Если то, что вы хотите воспроизвести это белый выделить на устройстве, попробуйте использовать прозрачный PNG для достижения эффекта, и абсолютно позиционировать его на верхней части изображения из устройство.

пример будет выглядеть следующим образом

<figure class="frame"> 
    <img src="mobile-device.jpg" /> 
</figure> 

CSS:

.frame { display: block; position: relative; } 
.frame:after { 
    display: block; 
    content: ""; 
    background: url('highlight.png'); 
    width: xx; 
    height: yy; 
    top: 0; left: 0; 
}