cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="wrapper" class="dv-01">

<div id="headerWrap" class="header-wrap">
<header id="header" class="header">
  <h1>Frame Patterns</h1>
  <p><span>repeating patterns as </span> <code>border-image</code></p>
</header>
</div>

<main class="main" role="main">

<section class="section section--code">
  <div class="width-1v2 divider section--code__example">

    <pre class="language-css shape--01"><code class="language-css">
.divider {
  border: 32px solid transparent;
  border-image:url(../svg/zigzag_96x96_border-image.svg) 32 round round;
  background-color: #f33;
}</code></pre>

    <pre class="language-css shape--02"><code class="language-css">
.divider {
  border: 32px solid transparent;
  border-image:url(../svg/wave_96x96_border-image.svg) 32 round round;
  background-color: #3c93c9;
}</code></pre>

    <pre class="language-css shape--03"><code class="language-css">
.divider {
  border: 32px solid transparent;
  border-image:url(../svg/trapeze_96x96_border-image.svg) 32 round round;
  background-color: #c9743c;
}</code></pre>
     <pre class="language-css shape--04"><code class="language-css">
.divider {
  border: 32px solid transparent;
  border-image:url(../svg/asterisk_96x96_border-image.svg) 32 round round;
  background-color: grey;
}</code></pre>
    <pre class="language-css shape--05"><code class="language-css">
.divider {
  border: 16px solid transparent;
  border-image:url(../svg/diagonal-block_48x48_border-image.svg) 16 round round;
  background-color: grey;
}</code></pre>
    <pre class="language-css shape--06"><code class="language-css">
.divider {
  border: 16px solid transparent;
  border-image: url(../svg/blocks_48x48_border-image.svg) 16 round round;
  background-color: grey;
}</code></pre>

     <pre class="language-css shape--07"><code class="language-css">
.divider {
  border: 50px solid transparent;
  border-image:url(../svg/meander_152x152_border-image.svg) 50 round round;
  background-color: #5d5db1;
}</code></pre>
    <pre class="language-css shape--08"><code class="language-css">
.divider {
  border: 12px solid transparent;
  border-image:url(../svg/stamp_36x36_border-image.svg) 12 round round;
  background-color: grey;
}</code></pre>
  </div>

  <div class="width-1v2 divider section--code__visual">

    <div class="fig"></div>
    <div class="figcaption">
      <pre class="shape--01">Zigzag shape
img size:
96px square</pre>
      <pre class="shape--02">Wave shape
img size:
96px square
      </pre>
      <pre class="shape--03">Trapeze shape
img size:
96px square
      </pre>
       <pre class="shape--04">Asterisk shape
img size:
96px square
      </pre>
      <pre class="shape--05">Diagonal Block shape
img size:
48px square
      </pre>
      <pre class="shape--06">Block shape
img size:
48px square
      </pre>

      <pre class="shape--07">Meander shape
img size:
152px square
      </pre>
      <pre class="shape--08">Stamp shape
img size:
36px square
      </pre>
    </div>

  </div>
</section>

<section id="about" class="section section--about">
    <div class="disclaimer divider width-1v2"><small class="divider">This demo will only work with browsers that support <code>border-image</code>, and only reliable so if the <code>round</code> value is correctly implemented.</small>
    </div>
     <div class="blockquote divider width-1v2"><blockquote>“For a certain kind of temperament, there is a certain kind of satisfaction in doing something that cannot be perfect, but can still be done to the best of your ability.” <cite><b>Matthew Carter</b> talking about <b>designing within constrains</b> in: <a href="http://t.co/tTijhPoeWz">My life in typefaces</a></cite></blockquote></div>
</section>

</main>

<footer class="footer footer--page"><small><a href="https://github.com/atelierbram/frame-patterns">Github</a> &middot; <a href="https://codepen.io/atelierbram/pen/vrdKB">Codepen</a></small></footer>
</div>
            
          
!
            
              *,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* outline: 1px dotted salmon */
}
/*
Name: Atelier Lakeside
Author: Bram de Haan (https://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside/)

Sass-variables template by Bram de Haan (https://github.com/atelierbram/c-tiles16)
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
*/

$base00: hsl(200, 15%, 10%);  /* #161b1d; */
$base01: hsl(200, 20%, 15%);  /* #1f292e; */
$base02: hsl(200, 21%, 40%);  /* #516d7b; */
$base03: hsl(200, 22%, 45%);  /* #5a7b8c; */
$base04: hsl(200, 24%, 55%);  /* #7195a8; */
$base05: hsl(200, 26%, 60%);  /* #7ea2b4; */
$base06: hsl(200, 75%, 86%);  /* #c1e4f6; */
$base07: hsl(200, 100%, 96%); /* #ebf8ff; */
$base08: hsl(335, 65%, 50%);  /* #d22d72; */
$base09: hsl(30, 60%, 36%);   /* #935c25; */
$base0a: hsl(60, 80%, 30%);   /* #8a8a0f; */
$base0b: hsl(100, 41%, 39%);  /* #568c3b; */
$base0c: hsl(160, 52%, 37%);  /* #2d8f6f; */
$base0d: hsl(200, 65%, 41%);  /* #257fad; */
$base0e: hsl(240, 35%, 53%);  /* #5d5db1; */
$base0f: hsl(290, 65%, 50%);  /* #b72dd2; */

$base16-red:     $base08;
$base16-orange:  $base09;
$base16-yellow:  $base0a;
$base16-green:   $base0b;
$base16-cyan:    $base0c;
$base16-blue:    $base0d;
$base16-violet:  $base0e;
$base16-magenta: $base0f;

$red:     $base08;
$orange:  $base09;
$yellow:  $base0a;
$green:   $base0b;
$cyan:    $base0c;
$blue:    $base0d;
$violet:  $base0e;
$magenta: $base0f;

/*

Prism template by Bram de Haan (https://atelierbram.github.io/syntax-highlighting/prism/)
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
*/
code[class*="language-"],
pre[class*="language-"] {
  // @extend %monospace !optional;
  // font-size: 14px;
  // line-height: 1.375;
  // direction: ltr;
  // text-align: left;
  // word-spacing: normal;
  //
  // -moz-tab-size: 4;
  // -o-tab-size: 4;
  // tab-size: 4;
  //
  // -webkit-hyphens: none;
  // -moz-hyphens: none;
  // -ms-hyphens: none;
  // hyphens: none;
  // white-space: pre;
  // white-space: pre-wrap;
  // word-break: break-all;
  // word-wrap: break-word;
  // background: $base07;
  // color: $base02;
}

/* Code blocks */
pre[class*="language-"] {
  // padding: 1em;
  // margin: .5em 0;
  // overflow: auto;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: $base05;
}

.token.punctuation {
  color: $base02;
}

.namespace {
  opacity: .7;
}

.token.null,
.token.operator,
.token.boolean,
.token.number {
  color: $base09;
}
.token.property {
  color: $base16-yellow;
}
.token.tag {
  color: $base16-blue;
}
.token.string {
  color: $base16-cyan;
}
.token.selector {
  color: $base16-violet;
}
.token.attr-name {
  color: $base09;
}
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: $base16-cyan;
}

.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit {
  color: $base16-green;
}

.token.statement,
.token.regex,
.token.atrule {
  color: $base16-cyan;
}

.token.placeholder,
.token.variable {
  color: $base16-blue;
}

.token.important {
  color: $base16-red;
  font-weight: bold;
}

.token.entity {
  cursor: help;
}

pre > code.highlight {
  outline: .4em solid $base16-red;
  outline-offset: .4em;
}

button {
  &:invalid {
    box-shadow: none;
  }
  &:focus {
    box-shadow: 0 0 5px 0 adjust-color($blue,$lightness: 5%,$saturation: 5%);
    z-index: 1;
  }
}

button {
  -webkit-appearance: none;
  border-radius: 4px;
  background-clip: padding-box;
  border: 1px solid;
  border-color: adjust-color($base05,$lightness: 5%) $base05 $base04;
  cursor: pointer;
  color: #333;
  display: inline-block;
  outline: 0;
  overflow: visible;
  margin: 2.5em 0 0;
  padding: 1em 2em;
  text-shadow: white 0 1px 1px;
  text-decoration: none;
  vertical-align: top;
  width: auto;
  font-size: 18px;

  background-color: $base07;

  background-image: linear-gradient(#fff,$base07 1px,$base06);


  &:hover {
  background-image: linear-gradient(#fff,$base07 1px,adjust-color($base06,$lightness: -5%));
    text-decoration: none;
  }

  &:active {
  background-image: linear-gradient($base06,$base07);
    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.25);
    border-color: #999 #bbb #ddd;
  border-color: $base04 $base05 adjust-color($base05,$lightness: 5%);
  }

  &::-moz-focus-inner {
    border: 0;
    padding: 0;
  }

  @media (min-width:960px){
      float: right;
      margin: 7em 2.5% 0 0;
  }
}
// @import "reset.scss";
// @import "vars.scss";
// @import "modules/prism-light";
// @import "modules/button";

$red-warmer: adjust-color($red,$hue: 25%,$saturation: 35%,$lightness: 10%);
$grey: grey;
html {
  // force a vertical scrollbar
  // padding-bottom: 1px;
  overflow-y: scroll;
  font-size: 16px;
}

html {
  // force a vertical scrollbar
  // padding-bottom: 1px;
  overflow-y: scroll;
  font-size: 16px;
}
html,
body {
  height: 100%;
}
body,
cite a {
  font-family: "PT Sans Narrow", pt_sans_narrowregular, AvenirNextCondensed-Regular, AvenirNext-Regular, Avenir-Light, "Lucida Grande", Corbel, "Trebuchet Ms", sans-serif;
}

body {
  font-size: 100%;
  line-height: 1.375;
  background-color: #fff;
  color: #111;
  text-align:center;
  position: relative;
}

.header-wrap {
  overflow: hidden;
  padding: 1em;
  border-bottom: 1em solid #fff;

//  @media (min-width:600px){
//    background-color: adjust-color($blue,$lightness: 30%);
//  }
}

.header {
  padding-bottom: 2em;
  max-width: 34em;
  @media (min-width:960px){
    float: left;
  }
}
h1 {
  position: relative;
  z-index: 2;
  line-height: 1;
  color: $violet;
  text-shadow: -1px -1px 1px #fff,2px 2px 0 $base05;

  @media (min-width:400px){
    font-size: 4em;
  }
  @media (min-width:600px){
    margin-bottom: -.75em;
  }
}
.main {
  margin-bottom: 4em;
}
svg,
img {
  max-width: 100%;
}
cite {
  font-style: normal;
}
cite a {
  font-style: italic;
  color: $base06;
}
cite a:hover {
  outline: 1px dotted hsla(0,0%,0%,.5);
}
h1,
h2,
.borderimage.svg .header p::after,
.header code,
.btn,
em,
blockquote cite b {
  font-family: "PT Sans Narrow", pt_sans_narrowbold, AvenirNextCondensed-DemiBold, "Lucida Grande", Corbel, "Trebuchet Ms", sans-serif;
  word-wrap: break-word;
  /* font-weight: normal; */
  font-style: normal;
}
.header p {
  position: relative;
  z-index: 1;
  background-color: #fff;

  @media (min-width:500px){
    font-size: 1.25em;
  }
  @media (min-width:600px){
    line-height: 2;
    margin-top:-.25em;
    padding-left: 3em; 
    padding-right: 3em; 
    border: 48px solid #fff;
    border-radius: 50%;
    box-shadow: 6px 20px 12px transparentize($blue, .65);
  }
}
.header span {
  display: inline-block;
}
.header code {
  @media (max-width:599px){
    width: 100%;
    display: inline-block;
  }
}

.borderimage.svg .header p::before {
  @media (min-width:600px){
    content: "";
    position: absolute;
    top:0;right:0;bottom:0;left:0;
    border-radius: 50%;
    height: 170px;
    margin-top: -54px;
    width: 75%;
    margin-left: 12.5%;
    background-color: #fff;
    z-index: -2;
  }
}
.borderimage.svg .header p::after {
  @media (min-width:600px){
    position: absolute;
    right:0;bottom:0;left:0;
    margin-bottom: -2.85em;
    z-index: 3;
    font-size: 1.125em;
    color: $red;
  }
}
.borderimage.svg .dv-01 .header p::after {
  @media (min-width:600px){
    content: "ZigZag";
  }
}
.borderimage.svg .dv-02 .header p::after {
  @media (min-width:600px){
    content: "Wave";
  }
}
.borderimage.svg .dv-03 .header p::after {
  @media (min-width:600px){
    content: "Trapeze";
  }
}
.borderimage.svg .dv-04 .header p::after {
  @media (min-width:600px){
    content: "Asterisk";
  }
}
.borderimage.svg .dv-05 .header p::after {
  @media (min-width:600px){
    content: "Diagonal Block";
  }
}
.borderimage.svg .dv-06 .header p::after {
  @media (min-width:600px){
    content: "Straight Block";
  }
}
.borderimage.svg .dv-07 .header p::after {
  @media (min-width:600px){
    content: "Meander";
  }
}
.borderimage.svg .dv-08 .header p::after {
  @media (min-width:600px){
    content: "Stamp";
  }
}
.footer--page {
  position: fixed;
  bottom:0;left:0;right:0;
  background-color: hsla(0,0%,0%,.5);
  color: #fff;
  color: hsla(0,0%,100%,.75);
}
.footer--page small {
  font-size: 1em;
  display: block;
  text-shadow: 1px 1px 0 hsla(0,0%,0%,.75);
}
.footer--page a {
  display: inline-block;
  padding: 1em 0;
  color: #fff;
  color: hsla(0,0%,100%,.75);
  text-decoration: none;
}
.footer--page a:focus,
.footer--page a:hover,
.footer--page a:active {
  text-decoration: underline;
}

pre {
  margin: 0;
  font: .75em/1.25 Consolas, Menlo, Monaco, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
  white-space: pre-wrap;
  color: #000;
}

a {
  color: adjust-color($blue,$lightness: -30%);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h2 {
  font-size: 2em;
}
h2,
blockquote {
  text-align: left;
}

.section--about {
  text-align: left;
  // background-color: adjust-color($orange,$lightness: 25%);
}
.section--about  p {
  padding: .5em 0;

  @media (min-width:400px){
    font-size: 1.5em;
    max-width: 26em;
  }
  @media (min-width:960px){
    font-size: 3em;
    margin: 0 2.5rem;
  }
}

.section--about h2 {
  @media (min-width:600px){
    font-size: 4em;
    margin: 0 2.5rem;
  }
}
.section--about .divider {
  @media (min-width:600px){
    padding-left: 2rem;
    padding-right: 2rem;
  }
  @media (min-width:700px){
    padding-left: 3rem;
    padding-right: 3rem;
  }
  @media (min-width:800px){
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
.blockquote blockquote {
  max-width: 29em;
}
.section--about .blockquote {
  padding-bottom: 4em;
  background-color: $violet;
  color: #fff;
  color: hsla(0,0%,100%,.9);
  text-shadow: 1px 1px 0 hsla(0,0%,0%,.75);
  letter-spacing: 1px;

  @media (min-width:600px){
    font-size: 1.5em;
  }
}
.disclaimer {
  // background-color: hsla(0,0%,100%,.75) !important;
}
.disclaimer small {
  background-color: mix($magenta,$violet,50%) !important;
  font-size: 1.125em;
  display: block;
  max-width: 32em;
}

.main p code,
.main small code {
  font-size: .875em;
  border-radius: 3px;
  background-color: hsla(0,0%,100%,.25);
  margin: 0 3px;
  padding: 2px .5em 0;
  border: 1px solid hsla(0,0%,0%,.25);
  display: inline-block;
}
blockquote cite {
  margin-top: 1em;
  text-align: right;
  display: block;
  width: 100%;
}
blockquote cite a {
  float: right;
  clear: left;
  width: 100%;
  padding-right: .2em;
}

.fig {
  margin: 2em auto 0;
  background: hsla(0,0%,100%,.25) url(//atelierbram.github.io/frame-patterns/assets/svg/zigzag_96x96_border-image.svg) 0 0 no-repeat;
  width: 96px;
  height: 96px;
}
.dv-02 .fig {
  background-image: url(//atelierbram.github.io/frame-patterns/assets/svg/wave_96x96_border-image.svg);
  width: 96px;
  height: 96px;
}
.dv-03 .fig {
  background-image: url(//atelierbram.github.io/frame-patterns/assets/svg/trapeze_96x96_border-image.svg);
  width: 96px;
  height: 96px;
}
.dv-04 .fig {
  background-image: url(//atelierbram.github.io/frame-patterns/assets/svg/asterisk_96x96_border-image.svg);
  width: 96px;
  height: 96px;
}
.dv-05 .fig {
  background-image: url(//atelierbram.github.io/frame-patterns/assets/svg/diagonal-block_48x48_border-image.svg);
  width: 48px;
  height: 48px;
}
.dv-06 .fig {
  background-image: url(//atelierbram.github.io/frame-patterns/assets/svg/blocks_48x48_border-image.svg);
  width: 48px;
  height: 48px;
}
.dv-07 .fig {
  background-image: url(//atelierbram.github.io/frame-patterns/assets/svg/meander_152x152_border-image.svg);
  width: 152px;
  height: 152px;
}
.dv-08 .fig {
  background-image: url(//atelierbram.github.io/frame-patterns/assets/svg/stamp_36x36_border-image.svg);
  width: 36px;
  height: 36px;
}
.no-svg .fig {
  background: none;
}
// section dividers
.divider {
  padding: 2rem 1rem;
}
.dv-05 .divider,
.dv-06 .divider {
  padding: 3rem 2rem;
}
.dv-07 .divider {
  padding: 1rem 0;
}
.dv-08 .divider {
  padding: 3.25em 2.25em;
}
.borderimage.svg .divider {
  border: 32px solid transparent;
  border-image:url(//atelierbram.github.io/frame-patterns/assets/svg/zigzag_96x96_border-image.svg) 32 round round;
}

.flexbox .section {
  margin: 0 1em;

  @media (min-width: 1376px){
    display: flex;
    justify-content: center;
    align-items: stretch;
  }

}
// .no-flexbox .section--code .divider {
.no-flexbox .section .divider {
  min-height: 500px;
}
// .flexbox .section--code .divider {
.flexbox .section .divider {
  @media (min-width: 1376px){
    flex-grow: 1;
    min-height: initial;
    float: none;
  }
}

.section--code__visual {
  background-color:  $red;
}
// toggles
.borderimage.svg .dv-02 .divider {
  border: 32px solid transparent;
  border-image:url(//atelierbram.github.io/frame-patterns/assets/svg/wave_96x96_border-image.svg) 32 round round;
}
.borderimage.svg .dv-03 .divider {
  border: 32px solid transparent;
  border-image:url(//atelierbram.github.io/frame-patterns/assets/svg/trapeze_96x96_border-image.svg) 32 round round;
}
.borderimage.svg .dv-04 .divider {
  border: 32px solid transparent;
  border-image: url(//atelierbram.github.io/frame-patterns/assets/svg/asterisk_96x96_border-image.svg) 32 round round;
}
.borderimage.svg .dv-05 .divider {
  border: 16px solid transparent;
  border-image:url(//atelierbram.github.io/frame-patterns/assets/svg/diagonal-block_48x48_border-image.svg) 16 round round;
}
.borderimage.svg .dv-06 .divider {
  border: 16px solid transparent;
  border-image: url(//atelierbram.github.io/frame-patterns/assets/svg/blocks_48x48_border-image.svg) 16 round round;
}
.borderimage.svg .dv-07 .divider {
  border: 50px solid transparent;
  border-image:url(//atelierbram.github.io/frame-patterns/assets/svg/meander_152x152_border-image.svg) 50 round round;
}
.borderimage.svg .dv-08 .divider {
  border: 12px solid transparent;
  border-image:url(//atelierbram.github.io/frame-patterns/assets/svg/stamp_36x36_border-image.svg) 12 round round;
}

// .is-not-active ...
[class*="shape--"],
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  outline: 0;
}

// .is-active ...
.dv-01 .shape--01,
.dv-02 .shape--02,
.dv-03 .shape--03,
.dv-04 .shape--04,
.dv-05 .shape--05,
.dv-06 .shape--06,
.dv-07 .shape--07,
.dv-08 .shape--08 {
  clip: initial;
  height: auto;
  margin: 1.5em auto .5em;
  padding: 1em;
  overflow: auto;
  position: static;
  width: auto;
  outline: inherit;
}

// .is-active ...
.dv-01 .section--code__example .shape--01,
.dv-02 .section--code__example .shape--02,
.dv-03 .section--code__example .shape--03,
.dv-04 .section--code__example .shape--04,
.dv-05 .section--code__example .shape--05,
.dv-06 .section--code__example .shape--06,
.dv-07 .section--code__example .shape--07,
.dv-08 .section--code__example .shape--08 {
  font-size: 14px;
  line-height: 1.375;
  direction: ltr;
  text-align: left;
  word-spacing: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  white-space: pre;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  background: $base07;
  color: $base02;
  max-width: 50em;
  border: 1px solid adjust-color($base05,$lightness: 10%);
}

.section--code {
  background-color: $base06;
}
section {
  overflow: hidden;
}
.no-flexbox [class*="width-"] {
  float: left;
}
// .no-flexbox .width-1v2 {
.width-1v2 {
  @media (min-width: 1376px){
    width: 50%;
  }
}
.disclaimer small {
  background-color: rgba(black,.5);
  color: #fff;
  letter-spacing: 1px;
  word-spacing: -1px;
}

// no borderimage, no svg = no fun.
.no-svg body:before,
.no-borderimage body:after {
  position: absolute;
  background: #333;
  top:0;left:0;right:0;
  padding: 1em 1em 1.5em;
  background-color: $red-warmer;
  color: #fff;
  font-size: 2em;
  z-index: 3;
}
.no-borderimage body:after {
  content: "this browser doesn’t support border-images, so this demo will not make much sense is this environment";
}
.no-svg body:before {
  content: "this browser doesn’t support SVG images, so this demo will not make much sense is this environment";
}
.no-svg.no-borderimage body:before {
  content: "and also no SVG images: this demo wants to be seen in a modern browser!";
  padding-top: 8em;
  padding-bottom: 100%;
}
            
          
!
            
              $(function(){
        "use strict";
  $( "#headerWrap" ).append($("<button>toggle border-images</button>").attr('id','btnToggle').addClass('btn') );
}); 
$(function(){ 
        "use strict";
  $('#btnToggle').click(function () {
    $('#wrapper').each(function(){
      var classes = ['dv-01','dv-02','dv-03','dv-04','dv-05','dv-06','dv-07','dv-08'];

      this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
    }); 
  }); 
});  
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console