Рваные края блока

[seemax]

День добрый.

 

Создавая такой блок http://c2n.me/3mcMObf   рассматривал 2 варианта:

1) Применить белый прямоугольник с рваными краями и подчёркиванием заголовка как фоновый рисунок.

2) "Приклеивать рваное" через фон 5ти абсол спозиционированных псевдоэлементов, 2 для блока, 2 для заголовка и 1 для <p>

 

Пошёл по второму пути т как блок  имеет три разных размера в трёх разм экрана и в этом был свой challenge. Подгонка заняла уйму времени, думаю такое решение нерационально.

 

Возможны ли другие решения данной задачи, кроме 1 и 2?

[afdw]

border-image

[rus]

http://htmlbook.ru/css/border-image- IE только от 11+ версии поддерживается.

p.s. кто вообще такой блок придумал? жесть... а если текста больше?

[afdw]

 а если текста больше?

С border-image будет всё ОК. Посмотрите на border-image-generator.

[rus]

 

 а если текста больше?

С border-image будет всё ОК. Посмотрите на border-image-generator.

 

может и будет, но только не в ие

[seemax]

 Не рассматривал Border-image, т как забыл напрочь от неиспользования.

Border-image было бы интересно, если бы не:

а) Модерновый по жизни IE.

б) Рисунок не симетричен. Можно было бы придать ему симетричности в PS, но оффсет не предусмотрен в атрибутах Border-image и мы получим рваную линию вдоль краёв взамен рваного края.

 

Была мысль просто "закатать в картинку" всё. И текст, и заголовок, и блок. Поменять эту картинку из PS когда клиент определится с наполнением. 

 

За идею спасибо, хотя здесь это неприменимо.

[afdw]

Рисунок не симетричен. Можно было бы придать ему симетричности в PS, но оффсет не предусмотрен в атрибутах Border-image и мы получим рваную линию вдоль краёв взамен рваного края.

 

Не обязательно! Вот пример: http://jsfiddle.net/f7proaeg/Попробуйте также навести мышкой на блок.

[seemax]

Что то не так. Не выводится картинка, которая по ссылке http://arstyle.org/uploads/posts/2012-05/1336154765_1333994557_old_parchment_04.jpg

[afdw]

Странно. Перезалил.

[seemax]

Спасибо. Работает. Оригинально. Я так понимаю это можно задать при помощи border-image-generator.

На первый взгляд это усложнённый 1) вариант, из рассмотренных мною вначале.

 

Если не сложно, сформулируйте преимущества, для понимания метода. 

[afdw]

Преимущество в том, что это свойство как раз и придумали для того, чтобы делать такие вот блоки. И проще вы никак не сделаете (разве что задать фоном картинку, но в этом случае она будет вся тянуться).