Блог

Это стек из 8 белых теней коробки с синим градиентом фона внизу и белым фоном в другом месте.

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

 .content, .sidebar, .banner{
   background-color: white;
   -webkit-box-shadow: 0px 0px 15px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
}
  

Естественно, чем меньше теней от окна, тем они менее заметны на чистом белом фоне. Цель этого в том, чтобы я хотел, чтобы белая область содержимого вставлялась в синий градиент, но при этом белая светящаяся тень мягко «очищала» область градиента вокруг областей содержимого, как показано на этом изображении

Это изображение взято из моего макета, сделанного с использованием Adobe fireworks; вы можете видеть, как белое свечение-тень идеально вписывается в белый фон, а также очень хорошо сочетается с нижним градиентом. Есть идеи, из-за чего мои CSS-тени (пока протестированные только в Chrome) ведут себя плохо, или любой другой механизм, который я могу использовать для достижения желаемого эффекта?

Вместо того, чтобы использовать 8 разных теней для одного элемента, используйте свойство shadow spread с большим размером, чтобы получить желаемый эффект:

   box-shadow: 0px 0px 35px 20px #fff;
  

Как вы можете видеть в этой демонстрации, вам нужна только одна тень, а четвертое свойство 20px позволяет вам распространять тень дальше от края элемента, создавая эффект мягкого свечения. Поиграйте с настройками, чтобы получить то, что вы хотите.

Кроме того, чтобы лучше воссоздать эффект, который у вас есть на скриншоте, вы можете использовать opacity: 0.5; , чтобы смягчить его еще больше. Посмотрите демонстрацию.

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