Верстка баннеров

[FaLaRD]

Всем привет

Столкнулся с версткой следующей картины - http://clip2net.com/s/5XRE8R

В голову не приходит ничего кроме :before и :after, но их маленький минус отсутсвие поддержки в ИЕ7

Сложность практически в каждом моменте, начиная от желтых узоров вверху кончая гвоздиками по бокам

Отдельную сложность создают рваные края по бокам и сверху блока.

Подскажите пожалуйста как это дело реализовать.

Задача интересная и хочется все сделать правильно.

Заранее спасибо!

[BSandro]

Могу сказать только одно сам в этом не профи но попытаюсь помочь :-)

Вырезай все по отдельности на прозрачном фоне!

<div class="1 класс фона">
<div class="класс 1 баннера">
<div class="класс держателя баннера"></div>
естественно тут сама картинка
</div>
<div clas="класс 2 баннера">
<div class="тут класс сплетения"></div>
тут картинка 2 баннера
</div>
<div clas="класс 3 баннера">
<div class="тут класс сплетения"></div>
тут картинка 4 баннера
</div>
</div>

Вот как то так!

[XAHTEP26]

Если поддержка IE не обязательна, то я бы попробовал рамку сделать с помощью border-image - там как раз есть повторяющиеся элементы на краях баннеров. А соединение между ними просто картинками.

[Catherine]

В голову не приходит ничего кроме :before и :after, но их маленький минус отсутсвие поддержки в ИЕ7

Для эмуляции псевдоэлементов в ИЕ6-7 раньше использовали expression'ы. Статья по теме.

[Vlad]

Размеры все заданы, не проще ли по максимуму всё картинками сделать? Уголки разве что добавить через псевдоэлементы поверх потом.

[FaLaRD]

Размеры все заданы, не проще ли по максимуму всё картинками сделать? Уголки разве что добавить через псевдоэлементы поверх потом.

Проблема в том что рваные края должны быть резиновые по вертикали, клиент вдруг захочет подписать снизу баннер (только наверное он один знает как это должно выглядеть)

Уголки пожалуй по-другому никак не добавить кроме псевдо. Множить элементы и позиционировать их это грязный вариант.

Если поддержка IE не обязательна, то я бы попробовал рамку сделать с помощью border-image - там как раз есть повторяющиеся элементы на краях баннеров. А соединение между ними просто картинками.

К сожалению поддержка обязательна. И border-image тоже сперва пришел в голову как легкий и современный вариант. Но увы он косячит не только в ИЕ, а также в остальных боевых браузерах.

Edited October 16, 2013 by FaLaRD

[Vlad]

Задача - сделай так, как только один я знаю как. Типичная ситуация. Всё-таки, лучше подходит рисунок. Фон можно через background-size чуть масштабировать. Если совсем для древних браузеров надо, то вставить через img и сверху остальное наложить.

[FaLaRD]

Задача - сделай так, как только один я знаю как. Типичная ситуация. Всё-таки, лучше подходит рисунок. Фон можно через background-size чуть масштабировать. Если совсем для древних браузеров надо, то вставить через img и сверху остальное наложить.

Где бы скачать фильтр от подобных заказчиков? Они как женщины сперва так, потом передумывают

Жаль нет эмуляции background-size для старых ие, хороший способ был бы.

Спасибо, будем пробовать.

[Vlad]

Деньги - лучший фильтр. Захотел что-то поменять - плати рупь. Не все так могут, но надо стараться, глядишь и воспитаем заказчиков с умом подходить к делу..