Skip to content

Commit

Permalink
another pattern
Browse files Browse the repository at this point in the history
  • Loading branch information
Afif13 committed Jan 15, 2024
1 parent 6ce4d9b commit b1f75af
Showing 1 changed file with 21 additions and 2 deletions.
23 changes: 21 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<h1><span>C</span><span>S</span><span>S</span> Pattern</h1>
<p>powered by CSS gradients</p>
<h2>the biggest collection of background Patterns</h2>
<p>Explore 139 CSS-only patterns made with CSS gradients and optimized with CSS variables.<br> I also have <a href="https://animated.css-pattern.com/" target="_blank">a collection of animated CSS Patterns</a></p>
<p>Explore 140 CSS-only patterns made with CSS gradients and optimized with CSS variables.<br> I also have <a href="https://animated.css-pattern.com/" target="_blank">a collection of animated CSS Patterns</a></p>
</header>
<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
<div class="adaptive" data-ea-publisher="css-challengescom" id="css-pattern" data-ea-type="text" data-ea-style="fixedfooter"></div>
Expand Down Expand Up @@ -2377,7 +2377,7 @@ <h2>the biggest collection of background Patterns</h2>
</section>
<section id="g138">
<style>#g138 {
--s: 46px; /* control the size */
--s: 50px; /* control the size */

--c:#9D2053 99%,#0000 101%;
background:
Expand All @@ -2403,6 +2403,25 @@ <h2>the biggest collection of background Patterns</h2>
linear-gradient( 45deg,var(--g)) var(--p),
linear-gradient(-45deg,var(--g)) var(--p) #CE1836;
}
</style><button>Copy the CSS</button>
</section>
<section id="g140">
<style>#g140 {
--s: 50px; /* control the size */
--c1:#F2F26F;
--c2:#A0C55F;

--c:#0000 79%,var(--c1) 81% 99%,var(--c2) 101% 150%,#0000 0;
background:
radial-gradient(var(--s) at 100% 100%,var(--c)),
radial-gradient(var(--s) at 100% 0 ,var(--c)) calc(3*var(--s)/2) 0,
radial-gradient(var(--s) at 0 100%,var(--c)) calc( var(--s)/2) 0,
radial-gradient(var(--s) at 0 0 ,var(--c)) calc(2*var(--s)) 0,
repeating-linear-gradient(90deg,
var(--c1) 0 calc(20%/3),#0000 0 calc(70%/3),
var(--c1) 0 30%,#0000 0 50%) calc(var(--s)/-5) 0 var(--c2);
background-size: calc(3*var(--s)) calc(5*var(--s)/2);
}
</style><button>Copy the CSS</button>
</section>
<section>
Expand Down

0 comments on commit b1f75af

Please sign in to comment.