Creating Seamless Airmail Strips with Pure CSS

Category: CSS & CSS3 | June 11, 2014
Author: thetwistedtaste
Views Total: 3,989
Official Page: Go to website
Last Update: June 11, 2014
License: MIT

Preview:

Creating Seamless Airmail Strips with Pure CSS

Description:

A little CSS/CSS3 made by thetwistedtaste to add seamless airmail strips to your container’s borders. No images needed. Used commonly for the border pattern of your subscription box to grab your visitor’s attention.

How to use it:

Create an inner element within a parent element with CSS class of ‘container’.

<div class="container">
  <div class="inner"> your subscription box</div>
</div>

The CSS to create seamless airmail strips around the ‘inner’ element. Use padding property to specify the height/thickness of the stripes. Made by thetwistedtaste.

.container {
  width: 300px;
  height: 200px;
  margin:0 auto;
  background-image: repeating-linear-gradient(135deg, #F29B91 0px, #F09290 30px, transparent 30px, transparent 50px, #83B3DB 50px, #84ADCB 80px, transparent 80px, transparent 100px);
  padding: 12px;
}

.container .inner {
  background: white;
  width: 100%;
  height: 100%;
}

You Might Be Interested In:


Leave a Reply