CODEWITHSUNDEEP
htmlcssborder
Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83438

Charcoal/mock up like border effect with CSS3

Is there a way to draw "charcoal like" borders with CSS3? These kind of lines are popular in many mock-up tools as they symbolize work in design phase.

E.g. images here

http://balsamiq.com/products/mockups

Upvotes: 3

Views: 6419

Answers (2)

Variant
Variant

Reputation: 17365

You can probably achieve this effect with CSS3's border-image property.

You can see some samples here: http://www.css3.info/preview/border-image/

and here: https://css-tricks.com/understanding-border-image/

Upvotes: 0

Niklas
Niklas

Reputation: 30002

Variant beat me to it, but as he mentioned, you can create quite a similar effect with the border-image property. Examples:

http://hertzen.com/experiments/css-charcoal-borders/ (it is just using a single image for all elements)

With my approach, the border images outer bit is colored white, so applying a background-color to the element will color the contents of the element inside it, leaving the outer bit white. If you need to get it working on multiple different background colors (requiring you to have transparancy inside and outside of the border-image), then you can create an element behind the current element, which is within the borders, and assign the background-color there.

Upvotes: 4

Related Questions