Recent searches

No recent searches

Search options

Only available when logged in.
toad.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
Mastodon server operated by David Troy, a tech pioneer and investigative journalist addressing threats to democracy. Thoughtful participation and discussion welcome.

Administered by:

Server stats:

227
active users

toad.social: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.1

#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>Another little pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> pattern: rhombic 🔥 <a href="https://codepen.io/thebabydino/pen/mdKQXqg" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/mdK</span><span class="invisible">QXqg</span></a></p><p>Minified compiled CSS is under 380 bytes. Can you figure out how before checking the code? 😊</p><p>Palette: <br>ed7b32 f19b36 966459 824739<br>b65333 fadc9c f4bb3a d6552b<br>Rhombi have a 60° acute angle and are 4em wide.</p><p><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/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</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>
Ana Tudor 🐯<p>And another one <a href="https://codepen.io/thebabydino/pen/YzvYqWL" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Yzv</span><span class="invisible">YqWL</span></a></p><p><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</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/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a></p>
Ana Tudor 🐯<p>Pure CSS pattern <a href="https://codepen.io/thebabydino/pen/wvXpMrX" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/wvX</span><span class="invisible">pMrX</span></a></p><p>Inspiration: <a href="https://shutterstock.com/image-vector/seamless-geometric-pattern-semicircles-dots-white-1625861365" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">shutterstock.com/image-vector/</span><span class="invisible">seamless-geometric-pattern-semicircles-dots-white-1625861365</span></a></p><p><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</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/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a></p>
TrendingLive feeds
About