Skip to content

Commit

Permalink
Added 5 new patterns
Browse files Browse the repository at this point in the history
in order Honeycomb, Wave, Tree, Pyramid and Chocolate Weave
  • Loading branch information
notsolucky committed Dec 22, 2014
1 parent bf85517 commit 8df8e56
Showing 1 changed file with 17 additions and 1 deletion.
18 changes: 17 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,23 @@ <h1>CSS3 Patterns Gallery</h1>
<li style="background-color: gray;
background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px 50px;" title="Horizontal stripes"></li>


<li style="background:radial-gradient(circle closest-side,#FC4 40%,transparent 90%)20px 30px,radial-gradient(circle closest-side,#FC4 40%,transparent 90%)0 0,radial-gradient(circle farthest-side at 0% 50%,#fb1 22.8%,transparent 23.8%)21px 30px,radial-gradient(circle farthest-side at 0% 50%,#B71 24%,transparent 25%)19px 30px,linear-gradient(#fb1 15%,transparent 16%, transparent 84%,#fb1 85%)0 0,linear-gradient(150deg,#fb1 23.5%,#B71 24%,#B71 26%,transparent 26.5%,transparent 73.5%,#B71 74%,#B71 76%,#fb1 76.5%)0 0,linear-gradient(30deg,#fb1 23.5%,#B71 24%,#B71 26%,transparent 26.5%,transparent 73.5%,#B71 74%,#B71 76%,#fb1 76.5%)0 0,linear-gradient(90deg,#B71 2%,#fb1 2.5%,#fb1 97.5%,#B71 98%)0 0 #fb1;
background-size:40px 60px;"
title="HoneyComb" data-author="Paul Salentiny"></li>

<li style="background-color:steelblue; background-image: linear-gradient(#ffffff 50%, transparent 50%),radial-gradient(circle closest-side, #FFFFFF 53%, transparent 54%),radial-gradient(circle closest-side, #FFFFFF 50%, transparent 51%);background-size:110px 200px;background-position: 0 0, 0 0, 55px 0;background-repeat:repeat-x;"
title="Wave" data-author="Paul Salentiny"></li>

<li style="background-color: lightsteelblue;background-image: linear-gradient(225deg, transparent 94%, #3c5f49 94%), linear-gradient(135deg, transparent 94%, #3c5f49 94%), linear-gradient(225deg, transparent 91%, #3c5f49 91%), linear-gradient(135deg, transparent 91%, #3c5f49 91%), linear-gradient(225deg, transparent 88%, #3c5f49 88%), linear-gradient(135deg, transparent 88%, #3c5f49 88%), linear-gradient(225deg, transparent 87%, #3c5f49 87%), linear-gradient(135deg, transparent 87%, #3c5f49 87%), linear-gradient(262deg, transparent 92%, #4b3b2a 92%), linear-gradient(99deg, transparent 92%, #4b3b2a 92%);background-size: 60px 100px;background-position: -100px -40px, -100px -40px, -100px -30px, -100px -30px, -100px -20px, -100px -20px, -100px -10px, -100px -10px, -102px 0, -98px 0;"
title="Tree" data-author="Paul Salentiny"></li>

<li style="background-color: #000;background-image: linear-gradient(315deg, transparent 75%, #d45d55 75%), linear-gradient(45deg, transparent 75%, #d45d55 75%), linear-gradient(135deg, #a7332b 50%, transparent 50%), linear-gradient(45deg, #6a201b 50%, transparent 50%), linear-gradient(45deg, transparent 50%, #561a16 50%);background-size: 20px 20px;background-position: -10px 0, -10px 0, 0 0, 0 0, 0 0;"
title="Pyramid" data-author="Paul Salentiny"></li>

<li style="background: linear-gradient(45deg, #cdbb99 12.5%, transparent 12.5%, transparent 88.5%, #cdbb99 88.5%), linear-gradient(135deg, transparent 37.5%, #a37e58 37.5%, #a37e58 63.5%, transparent 63.5%), linear-gradient(45deg, transparent 37.5%, #cdbb99 37.5%, #cdbb99 63.5%, transparent 63.5%);background-color: #755C3B;background-size: 25px 25px;"
title="Chocolate Weave" data-author="Paul Salentiny"></li>

</ul>

<h2 id="browser-support">Browser support</h2>
Expand Down

0 comments on commit 8df8e56

Please sign in to comment.