<!--This is taken from Lea Verou's book im just going through the examples. CSS background patterns -->
<h1>CSS patterns</h1>
<div class="pattern01"> pattern 1</div>
<div class="pattern02"> pattern 2</div>
<div class="pattern03"> pattern 3</div>
<div class="pattern04"> pattern 4</div>
<div class="pattern05"> pattern 5</div>
<div class="pattern06"> pattern 6</div>
<div class="pattern07"> pattern 7</div>
<div class="pattern08"> pattern 8</div>
<div class="pattern09"> pattern 9</div>
<div class="pattern10"> pattern 10 </div>
<div class="pattern11"> pattern 11</div>
<div class="pattern12"> pattern 12</div>
<div class="pattern13"> pattern 13 </div>
<div class="pattern14"> pattern 14</div>
<div class="pattern15"> pattern 15</div>
<div class="pattern16"> pattern 16 </div>
<div class="pattern17"> pattern 17</div>
<div class="pattern18"> pattern 18</div>

div {
  margin: 10px 20px 60px;
  width: 13em;
  padding: 5px 10px;
  display: inline-block;
  min-height: 100px;
}
.pattern01 {
 background: white;
 background-image: 
   linear-gradient(90deg, rgba(200,0,0,0.5) 50%, transparent 0), 
   linear-gradient(90deg, rgba(200,0,0,0.5) 50%, transparent 0);
 background-size: 30px 30px;
}
.pattern02 {
 background: white;
 background-image: 
   linear-gradient(rgba(200,0,0,0.5) 50%, transparent 0), 
   linear-gradient(rgba(200,0,0,0.5) 50%, transparent 0);
 background-size: 30px 30px;
}
.pattern03 {
 background: white;
 background-image:
   linear-gradient(90deg, rgba(200,0,0,0.5) 50%, transparent 0), 
   linear-gradient(90deg, rgba(200,0,0,0.5) 50%, transparent 0),
   linear-gradient(rgba(200,0,0,0.5) 50%, transparent 0);
 background-size: 30px 30px;
}
.pattern04 {
 background: #58a;
 background-image: linear-gradient(white, 1px, transparent 0),
                   linear-gradient(90deg ,white, 1px, transparent 0);
 background-size: 30px 30px;
}
.pattern05 {
 background: #58a;
 background-image:linear-gradient(hsla(0, 0%, 100%, 0.3), 1px, transparent 0),
                  linear-gradient(90deg, hsla(0, 0%, 100%, 0.3), 1px, transparent 0),
                  linear-gradient( white, 2px, transparent 0),
                  linear-gradient(90deg, white, 2px, transparent 0);
 background-size: 15px 15px, 15px 15px, 75px 75px, 75px 75px;
}

.pattern06 {
  background: #665;
  background-image: radial-gradient(tan 30%, transparent 0);
  background-size: 30px 30px;
}

.pattern07 {
  background: #665;
  background-image: 
      radial-gradient(tan 30%, transparent 0), 
      radial-gradient(tan 30%, transparent 0);
  background-size: 30px 30px, 20px 20px;
}

.pattern07 {
  background: #665;
  background-image: 
      radial-gradient(tan 30%, transparent 0), 
      radial-gradient(tan 30%, transparent 0);
  background-size: 30px 30px, 20px 20px;
}

.pattern08 {
  background: #665;
  background-image: 
      radial-gradient(tan 50%, transparent 0), 
      radial-gradient(tan 30%, transparent 0);
  background-size: 30px 30px, 20px 20px;
  animation: slidein 3s alternate infinite;
  background-blend-mode: multiply, normal;

}

@keyframes slidein {
  from {
    background-size: 29px 29px, 21px 21px; 
  }
  to {
    background-size: 31px 31px, 19px 19px;
  }
}

.pattern09 {
  background: red;
  background-image: 
    radial-gradient(pink 20%, transparent 0),
    radial-gradient(pink 20%, transparent 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

.pattern10 {
  background: #eee;
  background-image: 
    linear-gradient(45deg, #bbb 25%, transparent 0)
    ;
  background-size: 30px 30px;
}

.pattern11 {
  background: #eee;
  background-image: 
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0)
    ;
  background-size: 30px 30px;
}

.pattern12 {
  background: #eee;
  background-image: 
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(53deg, transparent 75%, #bbb 0)
    ;
  background-size: 10px 30px;
  background-position: 5px 5px, 0 0,
}

.pattern13 {
  background: #eee;
  background-image: 
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(225deg, #bbb 25%, transparent 0)
    ;
  background-size: 30px 30px, 15px 15px;
}


.pattern14 {
  background: #eee;
  background-image: 
    linear-gradient(45deg, transparent 75%, #bbb 0%)
    ;
  background-size: 30px 30px;
}
.pattern15 {
  background: #eee;
  background-image: 
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0)
    ;
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}
.pattern16 {
  background: #eee;
  background-image: 
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0)
    ;
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
}