101010.pl is one of the many independent Mastodon servers you can use to participate in the fediverse.
101010.pl czyli najstarszy polski serwer Mastodon. Posiadamy wpisy do 2048 znaków.

Server stats:

480
active users

#csspatterns

0 posts0 participants0 posts today
Ana Tudor 🐯<p>8️⃣ 736 ♥️ Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> 1 div card patterns (no SVG, no images other than CSS gradients) - see it on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/NWxBzRv" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/NWx</span><span class="invisible">BzRv</span></a></p><p>A bunch of variations on the pure CSS <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>halftone</span></a> technique detailed in this article <a href="https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">frontendmasters.com/blog/pure-</span><span class="invisible">css-halftone-effect-in-3-declarations/</span></a></p><p><a href="https://mastodon.social/tags/cssPattern" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssPattern</span></a> <a href="https://mastodon.social/tags/cssPatterns" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssPatterns</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/halftonePattern" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>halftonePattern</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a></p>
Ana Tudor 🐯<p>Minimal pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> textile patterns on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/full/OJmpzya" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/full/OJ</span><span class="invisible">mpzya</span></a></p><p>Absolutely no images other than CSS gradients and they are all tiny! All of them are under 500 bytes minified, some of them well under!</p><p><a href="https://mastodon.social/tags/pattern" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>pattern</span></a> <a href="https://mastodon.social/tags/cssPattern" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssPattern</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/patterns" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>patterns</span></a> <a href="https://mastodon.social/tags/cssPatterns" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssPatterns</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/textile" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>textile</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a></p>
Ana Tudor 🐯<p>Pure <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> pattern on <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a>: connectors <a href="https://codepen.io/thebabydino/pen/MWXVRjr" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/MWX</span><span class="invisible">VRjr</span></a></p><p>Made with two grids of targets, one with black in the middle, the other one with white, offset by half a background-size.</p><p>These targets touch diagonally, so their size within background box is computed as in the hand drawing.</p><p>Beside these two layers, we also stack a conic-gradient one of twice the background-size of the other two and which creates a sort of chessboard. We blend all 3 of them using lighten.</p><p><a href="https://mastodon.social/tags/cssPatterns" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssPatterns</span></a></p>
Ana Tudor 🐯<p>Pure <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> pattern: 🥀 </p><p><a href="https://codepen.io/thebabydino/pen/zYaayWW" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/zYa</span><span class="invisible">ayWW</span></a></p><p>Felt like making this one a bit more gradienty than the original <a href="https://www.shutterstock.com/image-vector/black-yellow-art-deco-seamless-pattern-1641614395" rel="nofollow noopener" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">shutterstock.com/image-vector/</span><span class="invisible">black-yellow-art-deco-seamless-pattern-1641614395</span></a><br>(otherwise, the number of gradients could be reduced)</p><p><a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/cssPatterns" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssPatterns</span></a></p>