Skip to content

Commit

Permalink
another pattern
Browse files Browse the repository at this point in the history
  • Loading branch information
Afif13 committed Feb 11, 2024
1 parent 5867086 commit 090cace
Showing 1 changed file with 15 additions and 1 deletion.
16 changes: 15 additions & 1 deletion 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 142 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 143 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 @@ -2448,6 +2448,20 @@ <h2>the biggest collection of background Patterns</h2>
repeating-linear-gradient(-45deg,var(--g)) var(--c);
background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>
</section>
<section id="g143">
<style>#g143 {
--s: 16px; /* control the size */
--c1:#E4844A;
--c2:#0D6759;

--g:radial-gradient(30% 50% at 30% 100%,#0000 66%,var(--c1) 67% 98%,#0000);
background:
var(--g),var(--g) calc(5*var(--s)) calc(3*var(--s)),
repeating-linear-gradient(90deg,var(--c1) 0 10%,var(--c2) 0 50%);
background-size: calc(10*var(--s)) calc(6*var(--s));
}
</style><button>Copy the CSS</button>
</section>
<section>
Expand Down

0 comments on commit 090cace

Please sign in to comment.