Как сверстать такую тень?

[Evkaky]

http://www.intenseblog.com/theproton/blog/sed-suscipit-metus-a-ipsum-dapibus.html

Под картинкой тень очень интересная. По краям она тонкая и по мере приближению к центру становится все ярче и толще. Такая же тень у них сбоку, ограничивает контент от правого сайдбара.

Так вот, как сверстать такую тень? Не используя банально картинку в качестве фона.

Может какими нибудь ухищрениями с transform можно? Может у кого есть пример, скиньте плз)

Я знаю как сверстать тень для одного угла, что бы создать эффект как бы приподнятого уголка блока, вот такие: http://ruseller.com/lessons/les1493/demo/index.html

Но как сверстать такую тень, как в теме вордпресса... Или такую тень только картинкой можно сделать? :(/>

Edited November 17, 2012 by Evkaky

[Alex Shnayder]

А в чем проблема сделать не одну тень, а две? Псевдоэлемента-то два.

Вот примеры: http://habrahabr.ru/post/133258/.

[berg12]

Как-нибудь то сделать можно. Не знаю, на сколько вам данное решение подходит, но например можно это использовать- -webkit-gradient

Если хотите увидеть что в итоге получается, вот вам пример стиля:

background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(4%, #FCFCFC), color-stop(96%, #8A8A8A), color-stop(100%, #4D4D4D));background:-moz-linear-gradient(top, #fff 0%, #FCFCFC 4%, #8A8A8A 96%, #4D4D4D 100%);background:-ms-linear-gradient(top, #fff 0%, #FCFCFC 4%, #8A8A8A 96%, #4D4D4D 100%);background:-o-linear-gradient(top, #fff 0%, #FCFCFC 4%, #8A8A8A 96%, #4D4D4D 100%);background:linear-gradient(top, #fff 0%, #FCFCFC 4%, #8A8A8A 96%, #4D4D4D 100%);}

[Evkaky]

Alex Shnayder, отличная статья, то что нужно! Благодарю!

Кстати, такой вопрос...все эти красивые тени на цсс3 в большом кол-ве на одной странице сильно сказываются на скорость отрисовки такой страницы браузером? Имеет ли смысл обойтись картинкой (если таких красивых теней на странице должно быть много) Есть у кого опыт?

[Alex Shnayder]

Есть вот такая статья об оптимизации CSS.

Судя по ней, box-shadow — одно из самых тяжелых свойств, а transform: rotate, которое используется в этих примерах для поворота псевдоэлементов, вообще ужасно тормозное. Так что если таких теней на странице должно быть много, стоит рассмотреть другие варианты.

[FEL]

вот какая у них тень

http://www.intenseblog.com/theproton/wp-content/themes/proton/images/image_placeholder.png

[npofopr]

Вот неплохой генератор)

Помогает понять, как устроена тень, как мне кажется)

Edited November 18, 2012 by npofopr