CSS3 Mail Stripes Pattern

Introduction

Seamless patterns are an awesome way to spice up your designs. CSS3 comes with some new gradient options that allow you to make imageless patterns. I’ve always liked the mail stripes pattern to denote some sort of contact form. It makes it look like you’re sending a letter. I also added a keyframe animation so that it looks like it is constantly sliding.

I’m using linear gradients because its easy to add multiple colors to the seamless pattern. The way I used to make the slanted pattern is a bit hacky, because the rotation allowed in the linear-gradient attribute does not work the way we want. So instead I create a massive vertical gradient and use css transforms to rotate it 45 degrees.

*note: uses non-standard css3 that is definitely not compatible with most browsers.

HTML structure

The HTML here is really basic. I to make the striped pattern, I have a wrapper div that will use overflow hidden to only show a 15px high bar.

    <div class="wrapper">
      <div class="stripes"></div>      
    </div>
    <div class="content">
      <form>
        <h3>Contact Us</h3>
        <input type="name" placeholder="Name">
        <input type="email" placeholder="Email">
        <textarea type="email" placeholder="Message"></textarea><br />
        <a class="btn submit" href="#">submit</a>
      </form>      
      
      <div class="footer">
        <a href="http://webdesigncrowd.com">WebDesignCrowd</a>
      </div>
    </div>

CSS

Here is the css for the pattern. It uses background: linear-gradient coupled with background-size to give it scale.

.wrapper {
  overflow: hidden;
  height: 15px;
}
  .stripes {
    position: relative;
    height: 2000px;
    width: 2000px;
    background: linear-gradient(90deg, #e6e9eb 10%, #73a5ef 5%, #73a5ef 50%, #e6e9eb 50%, #e6e9eb 60%, #e9697b 60%);
    background-size: 40px 40px;
    margin-top: 40px;
    transform:rotate(45deg) translateX(-100px);
    -webkit-transform:rotate(45deg) translateX(-1000px);
  }

Here is the css for the keyframe animation the sliding pattern.

/* CSS3 Keyframe Animation for slide */
@-webkit-keyframes slide {
  0% {
    left: 0;
  }
  100% {
    left: 57px;
  }
}
@-moz-keyframes slide {
  0% {
    left: 0;
  }
  100% {
    left: 57px;
  }
}
@-o-keyframes slide {
  0% {
    left: 0;
  }
  100% {
    left: 57px;
  }
}
@-ms-keyframes slide {
  0% {
    left: 0;
  }
  100% {
    left: 57px;
  }
}
@keyframes slide {
  0% {
    left: 0;
  }
  100% {
    left: 57px;
  }
}
.stripes-animated {
  -webkit-animation: slide 3s linear infinite normal;
     -moz-animation: slide 3s linear infinite normal;
       -o-animation: slide 3s linear infinite normal;
      -ms-animation: slide 3s linear infinite normal;
          animation: slide 3s linear infinite normal;
}

The post CSS3 Mail Stripes Pattern appeared first on webdesigncrowd.com.