Гибкая коробка с закругленными углами, с тенью, с использованием изображений - PullRequest
1 голос
/ 16 марта 2012

У меня есть эта белая коробка, которая должна быть гибкой по вертикали:

rounded white box

Необычные закругленные углы и тени очень важны:

fancy details

И содержимое коробки должно доходить до края белого вокруг:

enter image description here

Проблема в том, что у меня очень строгие ограничения.

  • Я должен использовать изображения, нет css3 для меня. (запрос клиента, я знаю ...)
  • Фон, на котором будет находиться прямоугольник, может менять цвет, поэтому в идеале мы работаем с прозрачностью в этих изображениях.
  • Фон самой коробки останется белым.
  • Поддержка браузера является разумной, поэтому отрицательные поля, трюки с z-индексами - это честная игра.
  • В идеале , я хочу держаться подальше от хаков, сценариев .htc и влияния JavaScript.

Вы можете сказать мне, если я облажался с этими ограничениями, я не против. Я был бы признателен, если бы сказал, почему.)

1 Ответ

1 голос
/ 16 марта 2012

Вам нужно нарезать коробку на 3 секции. Верх, середина и низ. Затем вы растягиваете среднюю часть, чтобы заполнить область переменного размера. Посмотрите на CSS Раздвижную дверь технику.

...