Я пытаюсь использовать темный цвет тени с трех сторон 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;
}