CSS-эффекты и графика

Фигурные рамки

Четыре рамки вокруг картинки или блока: перфорация почтовой марки, рваный край бумаги, паспарту с зазором и угловые скобки. Всё на градиентах и масках, без единой картинки.

Перфорация по всем четырём краям.

Настройки

Диаметр дырки: 14 px Шаг между дырками: 22 px

Шаг не бывает меньше диаметра: иначе дырки наезжают друг на друга и край просто отваливается. Инструмент поднимает шаг сам.

Превью

Перфорация и рваный край режут сам элемент, паспарту и скобки его только обрамляют — поэтому первые два свойства нельзя применять к тому, у чего уже есть своя маска.

CSS

.frame {
  -webkit-mask-image: radial-gradient(circle 7px at 50% 0, #0000 99%, #000 101%), radial-gradient(circle 7px at 50% 100%, #0000 99%, #000 101%), radial-gradient(circle 7px at 0 50%, #0000 99%, #000 101%), radial-gradient(circle 7px at 100% 50%, #0000 99%, #000 101%);
  mask-image: radial-gradient(circle 7px at 50% 0, #0000 99%, #000 101%), radial-gradient(circle 7px at 50% 100%, #0000 99%, #000 101%), radial-gradient(circle 7px at 0 50%, #0000 99%, #000 101%), radial-gradient(circle 7px at 100% 50%, #0000 99%, #000 101%);
  -webkit-mask-position: 50% 0, 50% 100%, 0 50%, 100% 50%;
  mask-position: 50% 0, 50% 100%, 0 50%, 100% 50%;
  -webkit-mask-size: 22px 100%, 22px 100%, 100% 22px, 100% 22px;
  mask-size: 22px 100%, 22px 100%, 100% 22px, 100% 22px;
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}