Использование нескольких цветов для тени окна CSS

Я пытаюсь использовать темный цвет тени с трех сторон div и светлое "свечение" с одной стороны - по сути, используя два разных цвета для Тень блока CSS.На данный момент лучшее решение, которое я придумал, - это разместить тень со всех сторон, кроме одной, и использовать второй div со свечением, а третий div скрыть свечение со всех сторон, кроме одной, с полями и скрытым переполнением. . Мне просто интересно, может ли быть лучший (только для CSS) метод, чем тот, который я реализую? Любые идеи?

Демо здесь - http://swanflighthaven.com/css-shadow-glow.html

На светлом фоне это выглядит не так красиво: http://swanflighthaven.com/css-shadow-glow2.html

#main {
    max-width:870px;
    min-width:610px;
    margin:0px auto;
    position:relative;
    top:40px;
    min-height:400px;
}
#maininside {
    position:relative;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow:hidden;
    padding:0px 25px 25px 25px; 

}
#maininner {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow:hidden;
    box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
    -moz-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
    -webkit-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
    min-height:385px;
    padding:0px 15px 15px 15px;
    background:url(center.png) repeat;

}
#glow {
    position:absolute;
    height:50px;
    top:0px;
    box-shadow: 0 -10px 20px -5px #7b272c;
    -moz-box-shadow: 0 -10px 20px -5px #7b272c;
    -webkit-box-shadow: 0 -10px 20px -5px #7b272c;
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-right:25px;
    margin-left:25px;
    margin-bottom:25px;
}



    

11
задан seaofinformation 14 April 2012 в 08:06
поделиться