Skip to content

Commit d303e1d

Browse files
committed
Further clean up
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.
1 parent 5649fd8 commit d303e1d

File tree

1 file changed

+28
-50
lines changed

1 file changed

+28
-50
lines changed

index.html

+28-50
Original file line numberDiff line numberDiff line change
@@ -340,59 +340,37 @@ <h1>CSS3 Patterns Gallery</h1>
340340
background-size: 50px 50px;" title="Horizontal stripes"></li>
341341

342342

343-
<li style="background:
344-
radial-gradient(circle closest-side,#FC4 40%,rgba(240,166,17,0) 90%)20px 30px,
345-
radial-gradient(circle closest-side,#FC4 40%,rgba(240,166,17,0) 90%)0 0,
346-
radial-gradient(circle farthest-side at 0% 50%,#fb1 22.8%,rgba(240,166,17,0) 23.8%)21px 30px,
347-
radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 25%)19px 30px,
348-
linear-gradient(#fb1 15%,rgba(240,166,17,0) 16%, rgba(240,166,17,0) 84%,#fb1 85%)0 0,
349-
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,
350-
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,
351-
linear-gradient(90deg,#B71 2%,#fb1 2.5%,#fb1 97.5%,#B71 98%)0 0 #fb1;
343+
344+
<li style="background:
345+
radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
346+
radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
347+
linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
348+
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,
349+
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,
350+
linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
352351
background-size:40px 60px;"
353-
title="HoneyComb" data-author="Paul Salentiny"></li>
352+
title="HoneyComb" data-author="Paul Salentiny"></li>
354353

355-
<li style="
356-
background-color:steelblue;
357-
background-image:
358-
linear-gradient(#ffffff 50%, rgba(255,255,255,0) 50%),
359-
radial-gradient(circle closest-side, #FFFFFF 53%, rgba(255,255,255,0) 54%),
360-
radial-gradient(circle closest-side, #FFFFFF 50%, rgba(255,255,255,0) 51%);
361-
background-size:110px 200px;background-position: 0 0, 0 0, 55px 0;
354+
<li style="
355+
background: linear-gradient(#ffffff 50%, rgba(255,255,255,0) 0) 0 0,
356+
radial-gradient(circle closest-side, #FFFFFF 53%, rgba(255,255,255,0) 0) 0 0,
357+
radial-gradient(circle closest-side, #FFFFFF 50%, rgba(255,255,255,0) 0) 55px 0 #48B;
358+
background-size:110px 200px;
362359
background-repeat:repeat-x;"
363-
title="Wave" data-author="Paul Salentiny"></li>
364-
365-
<li style="background-color: lightsteelblue;
366-
background-image: linear-gradient(225deg, transparent 94%, #3c5f49 94%),
367-
linear-gradient(135deg, transparent 94%, #3c5f49 94%),
368-
linear-gradient(225deg, transparent 91%, #3c5f49 91%),
369-
linear-gradient(135deg, transparent 91%, #3c5f49 91%),
370-
linear-gradient(225deg, transparent 88%, #3c5f49 88%),
371-
linear-gradient(135deg, transparent 88%, #3c5f49 88%),
372-
linear-gradient(225deg, transparent 87%, #3c5f49 87%),
373-
linear-gradient(135deg, transparent 87%, #3c5f49 87%),
374-
linear-gradient(262deg, transparent 92%, #4b3b2a 92%),
375-
linear-gradient(99deg, transparent 92%, #4b3b2a 92%);
376-
background-size: 60px 100px;
377-
background-position: -100px -40px, -100px -40px, -100px -30px, -100px -30px, -100px -20px, -100px -20px, -100px -10px, -100px -10px, -102px 0, -98px 0;"
378-
title="Tree" data-author="Paul Salentiny"></li>
379-
380-
<li style="background-color: #000;
381-
background-image: linear-gradient(315deg, transparent 75%, #d45d55 75%),
382-
linear-gradient(45deg, transparent 75%, #d45d55 75%),
383-
linear-gradient(135deg, #a7332b 50%, transparent 50%),
384-
linear-gradient(45deg, #6a201b 50%, transparent 50%),
385-
linear-gradient(45deg, transparent 50%, #561a16 50%);
386-
background-size: 20px 20px;
387-
background-position: -10px 0, -10px 0, 0 0, 0 0, 0 0;"
388-
title="Pyramid" data-author="Paul Salentiny"></li>
389-
390-
<li style="background:
391-
linear-gradient(45deg, #cdbb99 12.5%, transparent 12.5%, transparent 88.5%, #cdbb99 88.5%),
392-
linear-gradient(135deg, transparent 37.5%, #a37e58 37.5%, #a37e58 63.5%, transparent 63.5%),
393-
linear-gradient(45deg, transparent 37.5%, #cdbb99 37.5%, #cdbb99 63.5%, transparent 63.5%);
394-
background-color: #755C3B;background-size: 25px 25px;"
395-
title="Chocolate Weave" data-author="Paul Salentiny"></li>
360+
title="Wave" data-author="Paul Salentiny"></li>
361+
362+
<li style="background: linear-gradient(315deg, transparent 75%, #d45d55 0)-10px 0,
363+
linear-gradient(45deg, transparent 75%, #d45d55 0)-10px 0,
364+
linear-gradient(135deg, #a7332b 50%, transparent 0) 0 0,
365+
linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0 #561a16;
366+
background-size: 20px 20px;"
367+
title="Pyramid" data-author="Paul Salentiny"></li>
368+
369+
<li style="background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),
370+
linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),
371+
linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;
372+
background-size: 25px 25px;"
373+
title="Chocolate Weave" data-author="Paul Salentiny"></li>
396374

397375
</ul>
398376

0 commit comments

Comments
 (0)