Создание CSS шумных границ с сплошным цветом границы и прозрачным PNG

Question

При создании веб-сайтов я часто использую прозрачные png (например, созданные с помощью http://www.noisetexturegenerator.com/), чтобы придать дизайну более материальный, реалистичный вид.

Сейчас я работаю над дизайном, который также интенсивно использует границы, поэтому я подумал, возможно ли добавить текстуру таким же образом. (iow определяя сплошную границу и переопределяя ее с помощью png (png прозрачен, поэтому он должен адаптироваться к ранее указанному сплошному цвету))

Насколько мне известно, это не может быть сделано таким образом с border-image, так как браузеры тогда игнорируют сплошной цвет. (Я предпочтительно не устанавливаю изображение границы с фиксированным цветом для этой цели)

Работу также можно выполнить с использованием вложенных div, но это будет менее семантическим, и мне придется изменить некоторые представления Joomla.

Кроме того, предположим, что у меня есть 100x100px png (так же, как и для фона), как бы я должен был установить его так, чтобы он не изменял размер и не сохранял пропорции, или чтобы граница получала неожиданные переходы (например, воображаемые линии из-за неправильного размещения образцов)

В любом случае, есть еще предложения? (CSS шумные границы)

Answer 1

Если идея состоит в том, чтобы иметь простой цвет в background, то это может быть легко нарисовано через box-shadow:inset, в то время как вы устанавливаете свой шумный фон и прозрачные границы, чтобы увидеть его снизу. http://codepen.io/gc-nomade/pen/vEemwb

Если вы фоном является изображение, то background-clip поможет. http://codepen.io/gc-nomade/pen/vEemqP

Оба примера реле на прозрачной границе и шаблоне шума, установленном в background-image.

Answer 2

Ты можешь использовать before или же after псевдоэлементы, поместите изображение на исходный элемент, а сплошной цвет на псевдоэлемент (или наоборот).

Примерно так (с использованием непрозрачного шаблона: 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>

Таким образом, легко контролировать ширину, непрозрачность и позиционирование. Вам также не нужно беспокоиться о неожиданных переходах, если вы установите его repeat,