Как достичь этого эффекта css3 shadow?

Я пытаюсь понять, можно ли достичь этой тени, используя чистый css3:

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

Если css3 не происходит, я готов использовать jQuery.

любая помощь, очень ценится. спасибо.

edit: Ближайшим, которого я получил, чтобы добиться какой-либо тени только с помощью css3, является следующее: http://jsfiddle.net/tVt4w/

Ответы

Ответ 1

Сначала я не думал, что это возможно. Затем я нашел эту страницу, в которой показаны хорошие примеры в чистом css.

Острота.

См. демонстрационную страницу , чтобы понять, чего можно достичь.

Ответ 2

Да, это возможно. См:

http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

http://www.matthamm.com/box-shadow-curl.html

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

Ответ 3

Только HTML и CSS

Тень автоматически адаптируется к ширине изображения.

Используя PNG-изображение, это можно сделать:

(не исчерпывающе проверен на совместимость, но работает в последних FF, Safari и Chrome)

<style type="text/css" media="all">
.shadow {
    position:relative;
    width:auto;
    padding:0;
    margin:0;
}
.shadow:before,
.shadow:after {
    content:"";
    position:absolute; 
    z-index:-1;
}
.arch01:after {
    position:absolute;
    padding:0; margin:0;
    height:34px;
    width:100%;
    bottom:-30px;
    left:0px; right:0px;
    background-image: url('arch_01.png');
    background-size:100% 100%;
    background-position:left top;
}
</style>


<span class="shadow arch01">
    <img src="photo.jpg" width="500px" height="250px">
</span>

Ответ 4

Поздно, но вот еще одна хорошая демонстрационная ссылка http://www.paulund.co.uk/playground/demo/css_box_shadow/

Ответ 5

Для CSS существует свойство shadow. Но я не думаю, что вам удастся создать изогнутую тень, подобную только HTML и CSS. http://www.w3schools.com/css3/css3_pr_box-shadow.asp