Skip to content

Commit

Permalink
deploy: 2390ae7
Browse files Browse the repository at this point in the history
  • Loading branch information
@Afif13
Afif13 committed May 21, 2024
1 parent bf28d02 commit 30a4b9d
Show file tree
Hide file tree
Showing 17 changed files with 141 additions and 26 deletions.
1 change: 1 addition & 0 deletions 3d-zig-zag-edge/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ <h1>A CSS-only 3D Zig-Zag edge</h1>
on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p>More CSS Shapes: <a href="https://css-shape.com" target="_blank" rel="noopener">css-shape.com</a></p>

<ul class="links-nextprev"><li class="prev"><a href="/first-last-element-with-class/" title="Select the first &amp; last element with a class">Previous CSS Tip</a></li><li class="next"><a href="/css-ribbon-2/" title="A CSS-only Ribbon">Next CSS Tip</a></li>
</ul>
Expand Down
7 changes: 6 additions & 1 deletion archive/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ <h1>Archive</h1>



<p>Find below 164 CSS Tips. Don't know what to read? <a href="https://random.css-tip.com" target="_blank" rel="noopener">Get a random CSS Tip!</a></p>
<p>Find below 165 CSS Tips. Don't know what to read? <a href="https://random.css-tip.com" target="_blank" rel="noopener">Get a random CSS Tip!</a></p>

<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
<div class="adaptive" data-ea-publisher="css-challengescom" id="css-tip" data-ea-type="text" style="min-height: 100px;"></div>
Expand All @@ -56,6 +56,11 @@ <h1>Archive</h1>

<ul class="postlist" >

<li>
<a href="/css-pattern/" >CSS-only background patterns with a minimal code</a>
<time datetime="2024-05-21">May 21, 2024</time>
</li>

<li>
<a href="/single-digit-inputs/" >Single-digit inputs with one element (OTP)</a>
<time datetime="2024-05-14">May 14, 2024</time>
Expand Down
2 changes: 1 addition & 1 deletion avatar-hover-effect-2/index.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css-graph-paper/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ <h1>CSS Graph paper pattern</h1>
<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
<div class="adaptive" data-ea-publisher="css-challengescom" id="css-tip" data-ea-type="text" style="min-height: 100px;"></div>

<p>Create a Graph Paper design using only 2 gradients</p>
<p>Create a <a href="https://css-pattern.com/graph-paper" target="_blank" rel="noopener">Graph Paper</a> design using only 2 gradients</p>
<p><picture><source type="image/avif" srcset="/img/SVxfRQPx9J-461.avif 461w"><source type="image/webp" srcset="/img/SVxfRQPx9J-461.webp 461w"><img alt="A graph paper pattern" loading="lazy" decoding="async" src="/img/SVxfRQPx9J-461.png" width="461" height="373"></picture></p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span><br> <span class="token property">--s</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token comment">/* control the size */</span><br> <br> <span class="token property">--_g</span><span class="token punctuation">:</span> #0000 90deg<span class="token punctuation">,</span>#366 0<span class="token punctuation">;</span><br> <span class="token property">background</span><span class="token punctuation">:</span> <br> <span class="token function">conic-gradient</span><span class="token punctuation">(</span>from 90deg at 2px 2px<span class="token punctuation">,</span><span class="token function">var</span><span class="token punctuation">(</span>--_g<span class="token punctuation">)</span><span class="token punctuation">)</span><br> 0 0/<span class="token function">var</span><span class="token punctuation">(</span>--s<span class="token punctuation">)</span> <span class="token function">var</span><span class="token punctuation">(</span>--s<span class="token punctuation">)</span><span class="token punctuation">,</span><br> <span class="token function">conic-gradient</span><span class="token punctuation">(</span>from 90deg at 1px 1px<span class="token punctuation">,</span><span class="token function">var</span><span class="token punctuation">(</span>--_g<span class="token punctuation">)</span><span class="token punctuation">)</span><br> 0 0/<span class="token function">calc</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--s<span class="token punctuation">)</span>/5<span class="token punctuation">)</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--s<span class="token punctuation">)</span>/5<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="OJQoybg" data-preview="true" data-user="t_afif" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
Expand Down
78 changes: 78 additions & 0 deletions css-pattern/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!DOCTYPE html><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-only background patterns with a minimal code</title>
<link rel="icon" href="/img/fav.png" sizes="any">
<meta name="description" content="The biggest collection of CSS patterns. One-click to get the code">
<meta name="author" content="Temani Afif">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<link rel=canonical href="https://css-tip.com/css-pattern/" >
<link href="https://github.com/Afif13/" rel="me">
<link href="https://twitter.com/ChallengesCss" rel="me">
<meta property="og:locale" content="en_US" >
<meta property="og:title" content="CSS-only background patterns with a minimal code">
<meta property="og:type" content="website">
<meta property="og:url" content="https://css-tip.com/css-pattern/">
<meta property="og:description" content="The biggest collection of CSS patterns. One-click to get the code">
<meta property="og:image" content="/og-images/xWZxHfx6DA.png" >
<meta property="og:image:width" content="1200" >
<meta property="og:image:height" content="675" >
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="CSS Tip: Learn CSS the easy one">
<link rel="alternate" href="/feed/feed.json" type="application/json" title="CSS Tip: Learn CSS the easy one">
<meta name="generator" content="Eleventy v2.0.1">

<style>code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre[class*=language-diff-]{--eleventy-code-padding:1.25em;padding-left:var(--eleventy-code-padding);padding-right:var(--eleventy-code-padding)}.token.deleted{background-color:#8e2e2e;color:inherit}.token.inserted{background-color:#44824a;color:inherit}.token.prefix.deleted,.token.prefix.inserted,.token.prefix.unchanged{-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;padding-top:2px;padding-bottom:2px}.token.prefix.deleted,.token.prefix.inserted{width:var(--eleventy-code-padding);background-color:rgba(0,0,0,.2)}.token.deleted:not(.prefix),.token.inserted:not(.prefix){display:block;margin-left:calc(-1 * var(--eleventy-code-padding));margin-right:calc(-1 * var(--eleventy-code-padding));text-decoration:none;color:inherit}:root{--font-family:-apple-system,system-ui,sans-serif;--font-family-monospace:Consolas,Menlo,Monaco,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Courier New,Courier,monospace;--color-gray-20:#e0e0e0;--color-gray-50:#C0C0C0;--color-gray-90:#333;--background-color:#fff;--text-color:var(--color-gray-90);--text-color-link:#033254;--text-color-link-active:#5f2b48;--text-color-link-visited:#17050F;--syntax-tab-size:2}@media (prefers-color-scheme:dark){:root{--color-gray-20:#e0e0e0;--color-gray-50:#C0C0C0;--color-gray-90:#dad8d8;--text-color-link:#6fa2cc;--text-color-link-active:#6969f7;--text-color-link-visited:#a6a6f8;--background-color:#15202b}}*{box-sizing:border-box}body,html{padding:0;margin:0 auto;font-family:var(--font-family);color:var(--text-color)}html{--s:50px;--c:#fff;--c1:#f3f3f3;--_s:calc(2*var(--s)) calc(2*var(--s));--_g:35.36% 35.36% at;--_c:#0000 66%,var(--c1) 68% 70%,#0000 72%;background:radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s),radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s),radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s),radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s),repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s),radial-gradient(var(--c) 66%,var(--c1) 68% 70%,var(--c) 72%) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c);background-attachment:fixed;overflow-y:scroll;overflow-x:hidden}@media (prefers-color-scheme:dark){html{--c:#15202b;--c1:#25272e}}body{max-width:40em;min-height:100vh;display:flex;flex-direction:column}footer{margin-top:auto;text-align:center;padding:0 1rem}footer a{display:inline-block}h1{text-align:center;margin:.25em 0 1em;font-size:2.5rem;text-wrap:balance;text-transform:capitalize}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}p{line-height:1.5}li{line-height:1.5}a[href]{color:var(--text-color-link)}a[href]:active,a[href]:hover{color:var(--text-color-link-active)}main{padding:1rem}main img{max-width:100%;height:auto;margin:1.5rem auto;display:block}header{border-image:linear-gradient(to top,var(--color-gray-20) 1px,#0000 0) fill 0//0 100vw}footer{border-image:linear-gradient(to bottom,var(--color-gray-20) 1px,#0000 0) fill 0//0 100vw}.links-nextprev{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:1em;position:sticky;bottom:1em;font-size:1.25em}.links-nextprev>*{transform:translate(var(--t))}.links-nextprev .prev{margin-right:auto;--t:calc(-100% - 2em)}.links-nextprev .next{margin-left:auto;--t:calc( 100% + 2em)}.links-nextprev a:not(:hover){text-decoration:none}.links-nextprev a{position:relative}.links-nextprev .prev a:before{content:"";position:absolute;inset:0 100% 0 auto;width:1em;margin-right:.3em;background:currentColor;clip-path:polygon(100% 0,0 50%,100% 100%)}.links-nextprev .next a:after{content:"";position:absolute;inset:0 auto 0 100%;width:1em;margin-left:.3em;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}@supports (animation-timeline:scroll(root)){.links-nextprev>*{animation:t 1s linear;animation-timeline:scroll(root)}@keyframes t{0%,95%{transform:translate(var(--t))}to{transform:translate(0)}}}@media (max-width:1000px){.links-nextprev{position:static}.links-nextprev>*{--t:0!important}}table{margin:1em 0}table td,table th{padding-right:1em}code,pre{font-family:var(--font-family-monospace)}pre:not([class*=language-]){margin:.5em 0;line-height:1.375;-moz-tab-size:var(--syntax-tab-size);-o-tab-size:var(--syntax-tab-size);tab-size:var(--syntax-tab-size);-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal}pre[class*=language-]{margin:1.5em 0}header{display:flex;gap:1em .5em;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:1em}@media (max-width:540px){header{display:grid;place-items:center;place-content:center}}.home-link{font-size:2em;font-weight:700;text-decoration:none;color:var(--text-color)!important}.nav{display:flex;padding:0;margin:0;list-style:none;gap:1.5em}.nav-item a[href]:not(:hover){text-decoration:none}.nav a[href][aria-current=page]{text-decoration:underline}.postlist{list-style:none;padding:0;padding-left:1.5rem}.postlist>*{display:flex;flex-direction:column;align-items:start;margin-bottom:1em;position:relative}.postlist>:before{pointer-events:none;content:"❋";line-height:100%;position:absolute;right:calc(100% + .5em);top:.7em}.postlist time,.postlist>:before{font-size:.8125em;color:var(--color-gray-90)}.postlist time{word-spacing:-0.5px}.postlist a{font-size:1.1875em;font-weight:700;padding-right:.5em;text-underline-position:from-font;text-transform:capitalize}[data-ea-type=text]+p{margin-top:0}h1+time{display:block;text-align:center;margin:-1.5em 0 2em}.header-anchor{text-decoration:none;font-style:normal;font-size:1em;margin-left:.1em}a[href].header-anchor,a[href].header-anchor:visited{color:transparent}a[href].header-anchor:focus,a[href].header-anchor:hover{text-decoration:underline}:hover>a[href].header-anchor,a[href].header-anchor:focus{color:#aaa}h2+.header-anchor{font-size:1.5em}input[type=search]{display:block;width:calc(100% - 24px);margin:0 auto 2em;padding:.8em;border-radius:5px;border:1px solid #0005;font-size:1em}.hide{display:none!important}</style>
</head>
<body>
<a href="#skip" class="visually-hidden">Skip to main content</a>
<header>
<a href="/" class="home-link">CSS Tip</a>
<nav>
<h2 class="visually-hidden">Top level navigation menu</h2>
<ul class="nav">
<li class="nav-item"><a href="/">Home</a></li>
<li class="nav-item"><a href="/archive/">Archive</a></li>
<li class="nav-item"><a href="/about/">About</a></li>
<li class="nav-item"><a href="/feed/feed.xml" target="_blank">RSS Feed</a></li>
</ul>
</nav>
</header>
<main id="skip">
<h1>CSS-only background patterns with a minimal code</h1>

<time datetime="2024-05-21">May 21, 2024</time>

<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
<div class="adaptive" data-ea-publisher="css-challengescom" id="css-tip" data-ea-type="text" style="min-height: 100px;"></div>

<p><a href="https://css-pattern.com" target="_blank" rel="noopener">css-pattern.com</a>: The Biggest Collection Of Background Patterns</p>
<ul>
<li>A unique URL per pattern</li>
<li>Controls to adjust the size &amp; colors</li>
<li>Easy navigation between the patterns</li>
<li>Optimized with CSS variables</li>
<li>One-click to copy the code</li>
</ul>
<p>You can also surprise yourself with <a href="https://random.css-pattern.com" target="_blank" rel="noopener">a random CSS Pattern!</a></p>
<p><a href="https://css-pattern.com" target="_blank" rel="noopener"><picture><source type="image/avif" srcset="/img/0OMYAMUTS7-1350.avif 1350w"><source type="image/webp" srcset="/img/0OMYAMUTS7-1350.webp 1350w"><img alt="CSS patterns made with CSS gradients" loading="lazy" decoding="async" src="/img/0OMYAMUTS7-1350.png" width="1350" height="546"></picture></a></p>

<ul class="links-nextprev"><li class="prev"><a href="/single-digit-inputs/" title="Single-digit inputs with one element (OTP)">Previous CSS Tip</a></li>
</ul>

</main>
<footer>
<p>Created by <a href="https://github.com/Afif13/" target="_blank" rel="noopener">Temani Afif</a> (<a href="https://support.temani-afif.com/" target="_blank" rel="noopener">Support Me</a>) | <a href="https://css-generators.com/" target="_blank" rel="noopener">CSS Generators</a> | <a href="https://css-loaders.com/" target="_blank" rel="noopener">CSS Loaders</a> | <a href="https://css-shape.com/" target="_blank" rel="noopener">CSS Shape</a></p>
</footer>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KSNXZ63602"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-KSNXZ63602');
</script>
</body>
</html>
Loading

0 comments on commit 30a4b9d

Please sign in to comment.