У меня есть обертка для фона. Я хочу сделать это с помощью css вместо добавления изображения. Я не уверен, как добавить тень окна, так как я могу получить тот же результат, что и в прикрепленном изображении.Css boxshadow to uplift image

enter image description here

Я знаю, что коробка тени свойство будет использоваться здесь.

но только не уверен, как использовать это, чтобы получить тот же выход. я попытался с помощью

box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);

источник

2013-08-29 user930026

Вы пробовали это? – putvande

Я не уверен, что CSS3 даст вам гранулированный уровень контроля, который вам нужен, чтобы только теневая «сложенная» часть этого изображения. Если вы хотите затенять один или несколько полных сайтов, он работает очень хорошо, но не уверен, что он сделает то, что вы хотите здесь ... – LDJ

@LDJ да, это будет. Объединив его с некоторыми селекторами и некоторыми преобразованиями, это может быть достигнуто. Это не так просто, хотя – fditz

Попробуйте это:

HTML

<div class="box effect3"> 
    <h3>Effect 3</h3> 
</div>

CSS

.box h3{ 
    text-align:center; 
    position:relative; 
    top:80px; 
} 
.box { 
    width:70%; 
    height:200px; 
    background:#FFF; 
    margin:40px auto; 
} 

.effect3 
{ 
    position: relative; 
} 
.effect3:before 
{ 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 15px; 
    left: 10px; 
    width: 50%; 
    top: 80%; 
    max-width:300px; 
    background: #777; 
    -webkit-box-shadow: 0 15px 10px #777; 
    -moz-box-shadow: 0 15px 10px #777; 
    box-shadow: 0 15px 10px #777; 
    -webkit-transform: rotate(-3deg); 
    -moz-transform: rotate(-3deg); 
    -o-transform: rotate(-3deg); 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
}

Источник этот post от paulund

Кроме того, если вы хотите проверить это JQuery плагин из:

Shadows with JQuery

источник

2013-08-29 11:52:07 fditz

-1

Вы хотите использовать Box-shadow: правило в вашем CSS.

пример CSS

#example1 { 
    -moz-box-shadow: 10px 10px 5px #888; //mozilla support 
    -webkit-box-shadow: 10px 10px 5px #888; //webkit support 
    box-shadow: 10px 10px 5px #888; 
}

Однако коробка-тени, как и большинство правил CSS3 не будет работать в более ранних версиях есть.

Свойство box-shadow может принимать список теней, разделенных запятыми, каждый из которых определяется значениями длины 2-4 (с указанием горизонтального смещения, смещения по вертикали, дополнительного расстояния размытия и дополнительного расстояния распространения тени), необязательное значение цвета и необязательное ключевое слово «вставка» (чтобы создать внутреннюю тень, а не внешнюю тень по умолчанию).

Синтаксис:

box-shadow: none | <shadow> [ , <shadow> ]* 
<shadow> = inset? && [ <length>{2,4} && <color>? ]

enter image description here

More Information Here to Get You Started

источник

2013-08-29 11:43:04

Css boxshadow to uplift image

ответ

пример CSS

Синтаксис:

More Information Here to Get You Started

Смежные вопросы