Create css noisy borders with a solid border color and transparent png

Question

When making websites, I often use transparent png's (f.i. created with http://www.noisetexturegenerator.com/) to give the design a more material, realistic look.

Now, I'm working on a design which also heavily uses borders, so I wondered if it was possible to add texture the same way. (i.o.w. defining a solid border and overriding it with the png (the png is transparent so it has to adapt to the previously specified solid color))

To my knowledge it can't be done this way with border-image, since browsers then ignore the solid color. (I preferably do not set a border-image with fixed color for this purpose)

The job could also be done using nested div's, but that would be less semantic and I would have to modify some Joomla views.

Additionally, assume I have a 100x100px png (same as for background), how would I have to set it so that it does not resize and keeps proportions or that the border gets some unexpected transitions (like imaginary lines due to misplacing of patterns)

Anyway, has someone else suggestions? (css noisy borders)

score 2 · Accepted Answer · answered Feb 02 '15 at 20:58

If the idea is to have a plain color in background, then it can easily be drawn via box-shadow:inset, while you set your noisy background and transparent borders to see it underneath. http://codepen.io/gc-nomade/pen/vEemwb

If you background is an image, then background-clip will help. http://codepen.io/gc-nomade/pen/vEemqP

Both example relays on transparent border and noisy pattern set in background-image.

Shomz · Answer 2 · 2015-02-02T21:00:25.327

You can use before or after pseudo-elements, put the image on the original element, and the solid color on the pseudo (or vice-versa).

Something like this (using a non-transparent pattern: http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif):

div {
  width: 100px;
  height: 100px;
  border-width: 24px;
  border-image: url(http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif) 24 repeat;
}
div:after {
  content: "";
  width: 100px;
  height: 100px;
  border: 24px solid rgba(0, 255, 255, .8);
  display: block;
  margin: -24px;
}

<div></div>

This way, it's easy to control width, opacity and positioning. You also don't have to worry about unexpected transitions if you set it to repeat.

Create css noisy borders with a solid border color and transparent png

2 Answers2