Zebra Stripe Div to make Canopy with CSS and AFTER

Zebra Stripe Div to make Canopy with CSS and AFTER ~ Andrew Pougher

by Andrew Pougher

HTML

<h4>Pure CSS</h4><div class="container">

    <div class="blind"></div>
    <div class="blind"></div>
    <div class="blind"></div>
    <div class="blind"></div>
       <div class="blind"></div>
    <div class="blind"></div>
    <div class="blind"></div>
    <div class="blind"></div>
        <div class="blind"></div>
    <div class="blind"></div>
    <div class="blind"></div>
    <div class="blind"></div>
        <div class="blind"></div>
    <div class="blind"></div>
    <div class="blind"></div>
    <div class="blind"></div>
        <div class="blind"></div>
    <div class="blind"></div>
    <div class="blind"></div>
    <div class="blind"></div>
    
    <ul id="nav"><li><a href="#">item</a></li><li><a href="#">item</a></li><li><a href="#">item</a></li><li><a href="#">item</a></li><li><a href="#">item</a></li></ul>
</div>

<h4> With JQuery</h4>
    <ul class="image-list">
    <li></li>
    <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
    
</ul>
      <ul id="nav"><li><a href="#">item</a></li><li><a href="#">item</a></li><li><a href="#">item</a></li><li><a href="#">item</a></li><li><a href="#">item</a></li></ul>

<h4> Image only</h4>

<div class="canopy"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400);

body{background:#f9f7ed;
      font-family: 'Open Sans', Arial, sans-serif;
}


body:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: #c4e17f;
  border-radius: 5px 5px 0 0;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}


.canopy{
background-repeat:repeat-x;
background-size:contain;
background-position:center;
min-height:45px;
  background-color:#124f6d;
background-image:...

JavaScript

$ ('ul.image-list li:even').not("ul#nav li:even").addClass('even');
            $ ('ul.image-list li:odd').not("ul#nav li:odd").addClass('odd');