Creating Seamless Airmail Strips with Pure CSS

Author: thetwistedtaste
Views Total: 2,822 views
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%;
}

See also  Neon Style Rotating Borders with Pure CSS/CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *