Как пустить орнамент вдоль рамки?

[borus]

Здравствуйте

Есть задача вдоль рамки по внешнюю сторону от неё пустить орнамент на подобии такого:

Посоветуйте, какое может быть решение?

Благодарю

[Softlink]

Контент в обертку, обертке фоном этот орнамент и паддинги, на сколько и с какого края должен выступать этот орнамент. Это самый кроссбраузерный способ. Еще есть border-image.

[SelenIT]

Одной оберткой, имхо, не отбиться. Кратность высоты контента высоте орнамента же не гарантирована, а сдвинутый орнамент у нижней границы - безобразие. И это не считая нетривиальностей при стыковке углов... Я бы посоветовал как раз взять border-image для нормальных браузеров, а старью оставить деградацию до обычного бордера (solid, dotted или double - по вкусу, я бы выбрал последнее).

[psywalker]

Одной оберткой, имхо, не отбиться. Кратность высоты контента высоте орнамента же не гарантирована, а сдвинутый орнамент у нижней границы - безобразие. И это не считая нетривиальностей при стыковке углов... Я бы посоветовал как раз взять border-image для нормальных браузеров, а старью оставить деградацию до обычного бордера (solid, dotted или double - по вкусу, я бы выбрал последнее).

А можно ещё прикалоться, растянуть пэ и пару других пустых элементов ровно по границам, абсолютом через top, bottom и rigth, left, а им уже ширину, высоту, фон границ.

[Softlink]

А можно ещё прикалоться, растянуть пэ и пару других пустых элементов ровно по границам, абсолютом через top, bottom и rigth, left, а им уже ширину, высоту, фон границ.

Тогда и ПЭ не нужен и доп. элементы. Подойдет обычный множественный бэграунд, только заранее подготовить картинки надо.

[psywalker]

А можно ещё прикалоться, растянуть пэ и пару других пустых элементов ровно по границам, абсолютом через top, bottom и rigth, left, а им уже ширину, высоту, фон границ.

Тогда и ПЭ не нужен и доп. элементы. Подойдет обычный множественный бэграунд, только заранее подготовить картинки надо.

Да, но это не будет пахать в старых ослах.

[Softlink]

Да, но это не будет пахать в старых ослах.

...border-image для нормальных браузеров, а старью оставить деградацию до обычного бордера.

[psywalker]

Да, но это не будет пахать в старых ослах.

...border-image для нормальных браузеров, а старью оставить деградацию до обычного бордера.

[Softlink]

Макс, хорошая тема для статьи. Вопрос частый, вариантов несколько, полезно будет, имхо.

[psywalker]

Макс, хорошая тема для статьи. Вопрос частый, вариантов несколько, полезно будет, имхо.

Спасибо за идею, Шурик. Возьму на заметку.

[SelenIT]

Для IE8 еще можно выкрутиться двумя ПЭ и двумя фонами. Но проблему красивой стыковки углов это (в отличие от border-image), увы, не решает...

[psywalker]

Для IE8 еще можно выкрутиться двумя ПЭ и двумя фонами. Но проблему красивой стыковки углов это (в отличие от border-image), увы, не решает...

Нихрена себе, выкрутился)) Какой ценой!

[borus]

Что такое ПЭ?

[SelenIT]

Псевдоэлемент.

[borus]

Контент в обертку, обертке фоном этот орнамент и паддинги, на сколько и с какого края должен выступать этот орнамент. Это самый кроссбраузерный способ. Еще есть border-image.

дошел до кондиции. попробовал применить рамку с помощью border-image к wrapper. Вот. Не пойму как правильно его применить. не получается чётких стыков в левом и правом верхних углах. наверно ширину и высоту изображения надо было делать кратным 3?

Edited July 3, 2012 by borus