File tree Expand file tree Collapse file tree 1 file changed +15
-1
lines changed Expand file tree Collapse file tree 1 file changed +15
-1
lines changed Original file line number Diff line number Diff line change 27
27
< h1 > < span > C</ span > < span > S</ span > < span > S</ span > Pattern</ h1 >
28
28
< p > powered by CSS gradients</ p >
29
29
< h2 > the biggest collection of background Patterns</ h2 >
30
- < p > Explore 136 CSS-only patterns made with CSS gradients and optimized with CSS variables.</ p >
30
+ < p > Explore 137 CSS-only patterns made with CSS gradients and optimized with CSS variables.</ p >
31
31
</ header >
32
32
< script async src ="https://media.ethicalads.io/media/client/ethicalads.min.js "> </ script >
33
33
< div class ="adaptive " data-ea-publisher ="css-challengescom " id ="css-pattern " data-ea-type ="text " data-ea-style ="fixedfooter "> </ div >
@@ -2359,6 +2359,20 @@ <h2>the biggest collection of background Patterns</h2>
2359
2359
var (--c1 ) 0 );
2360
2360
background-size : var (--s ) var (--s );
2361
2361
}
2362
+ </ style > < button > Copy the CSS</ button >
2363
+ </ section >
2364
+ < section id ="g137 ">
2365
+ < style > # g137 {
2366
+ --s : 90px ; /* control the size */
2367
+ --c : # DDD9AB ;
2368
+
2369
+ --g : # 0000 calc (125% / 3 ), var (--c ) 0 calc (175% / 3 ), # 0000 0 ;
2370
+ --p : calc (var (--s )/ 2 ) calc (var (--s )/ 2 )/calc(2 * var (--s )) calc (2 * var (--s ));
2371
+ background :
2372
+ radial-gradient (var (--c ) 34% , # 0000 36% ) 0 0 /var(--s ) var (--s ),
2373
+ linear-gradient ( 45deg , var (--g )) var (--p ),
2374
+ linear-gradient (-45deg , var (--g )) var (--p ) # E5625C ;
2375
+ }
2362
2376
</ style > < button > Copy the CSS</ button >
2363
2377
</ section >
2364
2378
< section >
You can’t perform that action at this time.
0 commit comments