Sign in to follow this  
seemax

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

Recommended Posts

День добрый.


 


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


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


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


 


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


 


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


Share this post


Link to post
Share on other sites

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

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

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

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

 

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

 

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

Share this post


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

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

Share this post


Link to post
Share on other sites

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

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,511
    Total Members
    3,128
    Most Online
    Marking
    Newest Member
    Marking
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.