@@ -340,59 +340,37 @@ <h1>CSS3 Patterns Gallery</h1>
340
340
background-size: 50px 50px; " title ="Horizontal stripes "> </ li >
341
341
342
342
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;
352
351
background-size:40px 60px; "
353
- title ="HoneyComb " data-author ="Paul Salentiny "> </ li >
352
+ title ="HoneyComb " data-author ="Paul Salentiny "> </ li >
354
353
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;
362
359
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 >
396
374
397
375
</ ul >
398
376
0 commit comments