Skip to content

Instantly share code, notes, and snippets.

@iamtyce

iamtyce/CSS3-stamp-border.markdown

Created March 4, 2014 05:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iamtyce/9340649 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iamtyce/9340649 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. iamtyce created this gist Mar 4, 2014.
    7 changes: 7 additions & 0 deletions CSS3-stamp-border.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    CSS3 stamp border
    -----------------
    An experiment to try and recreate a stamp style border in CSS3 using only ::before and the element itself

    A [Pen](http://codepen.io/iamtyce/pen/kdEnJ) by [Tyce](http://codepen.io/iamtyce) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/iamtyce/pen/kdEnJ/license).
    6 changes: 6 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <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>
    54 changes: 54 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    @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;
    }

    }