Skip to content

Commit

Permalink
Further clean up
Browse files Browse the repository at this point in the history
Removed the tree background completely, 
removed the blurred inner circles from the honeycomb pattern,
removed on superfluous line in the pyramid pattern,
overall reduced the code needed by combining properties and set color stops identical to previous to 0.
  • Loading branch information
notsolucky committed Jan 15, 2015
1 parent 5649fd8 commit d303e1d
Showing 1 changed file with 28 additions and 50 deletions.
78 changes: 28 additions & 50 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -340,59 +340,37 @@ <h1>CSS3 Patterns Gallery</h1>
background-size: 50px 50px;" title="Horizontal stripes"></li>


<li style="background:
radial-gradient(circle closest-side,#FC4 40%,rgba(240,166,17,0) 90%)20px 30px,
radial-gradient(circle closest-side,#FC4 40%,rgba(240,166,17,0) 90%)0 0,
radial-gradient(circle farthest-side at 0% 50%,#fb1 22.8%,rgba(240,166,17,0) 23.8%)21px 30px,
radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 25%)19px 30px,
linear-gradient(#fb1 15%,rgba(240,166,17,0) 16%, rgba(240,166,17,0) 84%,#fb1 85%)0 0,
linear-gradient(150deg,#fb1 23.5%,#B71 24%,#B71 26%,rgba(240,166,17,0) 26.5%,rgba(240,166,17,0) 73.5%,#B71 74%,#B71 76%,#fb1 76.5%)0 0,
linear-gradient(30deg,#fb1 23.5%,#B71 24%,#B71 26%,rgba(240,166,17,0) 26.5%,rgba(240,166,17,0) 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;

<li style="background:
radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
background-size:40px 60px;"
title="HoneyComb" data-author="Paul Salentiny"></li>
title="HoneyComb" data-author="Paul Salentiny"></li>

<li style="
background-color:steelblue;
background-image:
linear-gradient(#ffffff 50%, rgba(255,255,255,0) 50%),
radial-gradient(circle closest-side, #FFFFFF 53%, rgba(255,255,255,0) 54%),
radial-gradient(circle closest-side, #FFFFFF 50%, rgba(255,255,255,0) 51%);
background-size:110px 200px;background-position: 0 0, 0 0, 55px 0;
<li style="
background: linear-gradient(#ffffff 50%, rgba(255,255,255,0) 0) 0 0,
radial-gradient(circle closest-side, #FFFFFF 53%, rgba(255,255,255,0) 0) 0 0,
radial-gradient(circle closest-side, #FFFFFF 50%, rgba(255,255,255,0) 0) 55px 0 #48B;
background-size:110px 200px;
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>
title="Wave" data-author="Paul Salentiny"></li>

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

<li style="background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),
linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),
linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;
background-size: 25px 25px;"
title="Chocolate Weave" data-author="Paul Salentiny"></li>

</ul>

Expand Down

0 comments on commit d303e1d

Please sign in to comment.