Уголь / макет как граничный эффект с CSS3 - PullRequest
Новая
       9

Уголь / макет как граничный эффект с CSS3

3 голосов
/ 19 июня 2011

Есть ли способ нарисовать "уголь как" границы с CSS3?Такие линии популярны во многих макетных инструментах, поскольку они символизируют работу на этапе проектирования.

Например, изображения здесь

http://balsamiq.com/products/mockups

  • Линия может быть не прямой и иметь некоторую «кривизну»

  • Линия имеет жирный оттенок

  • Эффект кисти: линия может содержать отдельные белыепикселей в нем

Ответы [ 2 ]

4 голосов
/ 19 июня 2011

Вариант превзошел меня, но, как он упомянул, вы можете создать совершенно аналогичный эффект со свойством border-image. Примеры:

http://hertzen.com/experiments/css-charcoal-borders/ (используется только одно изображение для всех элементов)

При моем подходе внешний бит границы изображения окрашен white, поэтому применение background-color к элементу раскрасит содержимое элемента внутри него, оставив внешний бит white. Если вам нужно, чтобы он работал на нескольких разных цветах фона (для этого требуется прозрачность внутри и снаружи border-image), то вы можете создать элемент позади текущего элемента, который находится внутри границ, и назначить background-color там.

0 голосов
/ 19 июня 2011

Вы, вероятно, можете добиться этого эффекта с помощью свойства CSS3 border-image.

Некоторые примеры можно посмотреть здесь: http://www.css3.info/preview/border-image/

и здесь: https://css -трюкиком / понимание границы образ /

...