Как создать эффект затенения CSS с выцветшей боковой панелью

Question

Привет, я не очень уверен, как создать эффект прикрепленного изображения, где правая сторона - это мой основной контент, и он затеняет мою левую боковую панель, которая имеет эффект градиента вниз.

Answer 1

Проверьте это: Генератор градиента CSS3 , выберите цвета и сгенерируйте код, затем добавьте его к body в вашем CSS (или к любому элементу, на котором вы хотите его использовать).

.body /*or element of your choice*/
-webkit-gradient(
{
    linear,
    left bottom,
    left top,
    color-stop(0.02, rgb(91,204,245)),
    color-stop(0.76, rgb(5,37,70))
)
-moz-linear-gradient(
    center bottom,
    rgb(91,204,245) 2%,
    rgb(5,37,70) 76%
)
}

Для тени от вашего основного контента используйте:

.MyElement
{
box-shadow: 10px 10px 5px #888;
}

А также проверьте CSS3 Box-shadow .

Кроме того, потому что не каждый браузерподдерживает box-shadow пока (IE), вы можете использовать границы изображения .Но IE не поддерживает это, поэтому на сайте я просто сделал PNG-изображение тени размером 1px и установил его в качестве фона для моей оболочки div, повторив его вниз / вверх (не помню, еслиэто X или Y) и он работал нормально:)

Надеюсь, что это поможет.

Answer 2

img.shady 
{
     display: inline-block; 
     webkit-box-shadow: 0 8px 6px -6px black; 
     -moz-box-shadow: 0 8px 6px -6px black; 
     box-shadow: 0 8px 6px -6px black; 
     padding: 10px; 
     margin-bottom: 5px !important; 
     min-height: 240px; 
     width: 630px; 
     border: 1px solid #D7D7D7
}

Answer 3

Ваша боковая панель должна использовать изображение png с непрозрачностью / прозрачностью, тогда затененная боковая панель будет работать с градиентным фоном. (Обратите внимание, что IE6 не понравится это решение, поэтому вам нужно найти решение для взлома IE6PNG, которое можно найти практически везде) Для градиентного фона создайте фоновое изображение или используйте градиент css3