CSS3 stamp border

CSS3-stamp-border.markdown

CSS3 stamp border

An experiment to try and recreate a stamp style border in CSS3 using only ::before and the element itself

A Pen by Tyce on CodePen.

License.

index.html

<div class="stamp">
  <h1>Stamp.</h1>
  <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus.</p>
  <p>Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac.</p>
  <p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. Nulla at nulla justo, eget luctus tortor.</p>
</div>

style.scss

@import "compass";
$backgroundColor: #3d3d3d;

$dotNumber: 10;

$borderSize: 15px;
$borderPosition: -$borderSize / 2;

$boxWidth: $dotNumber * $borderSize * 2;
$boxHeight: $dotNumber * $borderSize * 2;
$boxOffset: 10px;
$boxColor: #009ee0;

body {
  background: $backgroundColor;
	padding: 100px;
  font-family: Helvetica, sans-serif;
  font-size: 13px;
  z-index: 1;
}

* {
  @include box-sizing(border-box);
}

.stamp {
  
  // Main box
	width: $boxWidth;
	height: $boxHeight;
	display: block;
  margin: 10px;
	padding: 20px;
  background: $boxColor;
  text-align: left;
  color: #fff;
  position: relative;
  
  // Cutout
  &::before {
    content: "";
    position: absolute;
    top: -$boxOffset;
    left: -$boxOffset;
    width: $boxWidth + ($boxOffset * 1.5);
    height: $boxHeight + ($boxOffset * 1.5);
    background: $backgroundColor;
    z-index: -1;
    @include background-image(radial-gradient(transparent 0px, transparent 4px, $boxColor 4px, $boxColor));	
  	background-size: $borderSize $borderSize;
	  background-position: $borderPosition $borderPosition;
  }
  
}