Mastodon

GoldstarknightTip: Don't look directly at The CameraI have been replaying YIIK: A Postmodern RPG. Always liked the game, but I love how the devs overhauled it with I.V.The Camera is my new favourite character. :)<a href="https://mastodon.art/tags/MastoArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#MastoArt</a> <a href="https://mastodon.art/tags/YIIK" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#YIIK</a> <a href="https://mastodon.art/tags/fediart" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fediart</a> <a href="https://mastodon.art/tags/fanart" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fanart</a> <a href="https://mastodon.art/tags/clipstudiopaint" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#clipstudiopaint</a> <a href="https://mastodon.art/tags/screentone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#screentone</a> <a href="https://mastodon.art/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.art/tags/art" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#art</a> <a href="https://mastodon.art/tags/illustration" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#illustration</a>

CHZ STKnone of these fucking mutants would brake for you if you were crossing the street. <a href="https://pixelfed.social/discover/tags/xerox?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#xerox</a> <a href="https://pixelfed.social/discover/tags/print?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#print</a> <a href="https://pixelfed.social/discover/tags/cutandpaste?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#cutandpaste</a> <a href="https://pixelfed.social/discover/tags/distressed?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#distressed</a> <a href="https://pixelfed.social/discover/tags/halftone?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://pixelfed.social/discover/tags/zine?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#zine</a> <a href="https://pixelfed.social/discover/tags/fanzine?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#fanzine</a> <a href="https://pixelfed.social/discover/tags/diy?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#diy</a> <a href="https://pixelfed.social/discover/tags/punk?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#punk</a> <a href="https://pixelfed.social/discover/tags/hardcore?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#hardcore</a> <a href="https://pixelfed.social/discover/tags/powerviolence?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#powerviolence</a> <a href="https://pixelfed.social/discover/tags/thrash?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#thrash</a> <a href="https://pixelfed.social/discover/tags/fuckelonmusk?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#fuckelonmusk</a> <a href="https://pixelfed.social/discover/tags/fuckzuckerberg?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#fuckzuckerberg</a> <a href="https://pixelfed.social/discover/tags/fuckjeffbezos?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#fuckjeffbezos</a> <a href="https://pixelfed.social/discover/tags/fuckbillionaires?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#fuckbillionaires</a> <a href="https://pixelfed.social/discover/tags/antifascism?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#antifascism</a> <a href="https://pixelfed.social/discover/tags/antifa?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#antifa</a>

lukaszkupsYesterday I've came up with some happy incidents when messing around with default parameters config 🙌😎<a href="https://mastodon.social/tags/js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#js</a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/haftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#haftone</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/webdeveloper" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdeveloper</a> <a href="https://mastodon.social/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdevelopment</a>

lukaszkupsWorking further on some halftone effects and customization 👌😎<a href="https://mastodon.social/tags/js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#js</a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/webdeveloper" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdeveloper</a> <a href="https://mastodon.social/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdevelopment</a>

L.H.Soulwax - Any Minute Now artwork recreated with only CSS.<a href="https://codepen.io/lhoang-the-scripter/pen/emOVmLR" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/lhoang-the-scripter/pen/emOVmLR</a>I followed the great article about halftone effect in CSS by <a href="https://mastodon.social/@anatudor" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@anatudor</a> : <a href="https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/</a><a href="https://piaille.fr/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://piaille.fr/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a>

Ana Tudor 🐯Really cool to see people linking my Frontend Masters article as a resource <a href="https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/pattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#pattern</a> <a href="https://mastodon.social/tags/cssPattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssPattern</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a>

pablolarah🔴🟡 Pure CSS Halftone Effect in 3 Declarations by Ana Tudor <a href="https://mastodon.social/@anatudor" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@anatudor</a> at @frontendmasters.com <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/Halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Halftone</a><a href="https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/</a>

Ana Tudor 🐯I have a new article out: 🎇 Pure CSS Halftone Effect in Only 3 Declarations 🎇 <a href="https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/</a>This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/pattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#pattern</a> <a href="https://mastodon.social/tags/gradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gradient</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/cssPattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssPattern</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯Anyway, health and administrative issues aside... I've been cooking something cool when it comes to <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> and you'll get to see it soon!For now, here's a little demo I made that unexpectedly was one of the <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> picks last week and now even made this week's Spark.<a href="https://codepen.io/thebabydino/pen/MWNMjGO" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/MWNMjGO</a><a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/cssPattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssPattern</a>

Retro HeartPage from a comic idea I made in 2020.Kind of a bittersweet reminder of what I want to accomplish, have yet to accomplish, and how Things Keep Happening and my shifting priorities and goals to just... live... keep changing.<a href="https://mastodon.art/tags/Art" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Art</a> <a href="https://mastodon.art/tags/DigitalArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DigitalArt</a> <a href="https://mastodon.art/tags/MastoArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#MastoArt</a> <a href="https://mastodon.art/tags/Halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Halftone</a> <a href="https://mastodon.art/tags/RetroHeartArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RetroHeartArt</a>

Ana Tudor 🐯6⃣ 688 ❤️ Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> 1 div card patterns (no SVG, no images other than CSS gradients) <a href="https://codepen.io/thebabydino/pen/NWxBzRv" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/NWxBzRv</a>A variation on the pure CSS halftone technique <a href="https://mastodon.social/@anatudor/112401133442879091" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/112401133442879091</a><a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/pattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#pattern</a> <a href="https://mastodon.social/tags/gradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gradient</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/fliter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fliter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Inautilo<a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Design</a> <a href="https://mastodon.social/tags/Collections" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Collections</a> Halftone patterns · Single-element halftone textures crafted with pure CSS <a href="https://ilo.im/15yv3f" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/15yv3f</a>_____ <a href="https://mastodon.social/tags/Halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Halftone</a> <a href="https://mastodon.social/tags/Pattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Pattern</a> <a href="https://mastodon.social/tags/Texture" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Texture</a> <a href="https://mastodon.social/tags/Background" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Background</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Ana Tudor 🐯And here's another little demo on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> with halftone lines, single div, no text duplication, no wrapping individual letters in their own elements <a href="https://codepen.io/thebabydino/pen/WNWWOzN" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/WNWWOzN</a>Again, the magic 🪄 comes from SVG filters!<a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePenChallenge</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/text" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#text</a> <a href="https://mastodon.social/tags/textEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#textEffect</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a>

Ana Tudor 🐯No text duplication layered 3D effect with SVG filter magic 🪄Live on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> :🍭 <a href="https://codepen.io/thebabydino/pen/LYvQzve" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/LYvQzve</a> 🍭 <a href="https://codepen.io/thebabydino/pen/vYMdzVy" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/vYMdzVy</a><a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePenChallenge</a> In Bucharest, there used to be a cake shop called Candy Cat (logo 🐈 below). More recently, there's a candy 🍬 store (last image).<a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/dropShadow" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dropShadow</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMask</a> <a href="https://mastodon.social/tags/text" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#text</a> <a href="https://mastodon.social/tags/textEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#textEffect</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/3d" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#3d</a>

Ana Tudor 🐯3D + multilayer + other effects (halftone, inner shadow) with no text duplication, just some SVG filter magic 🪄Live on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a>: ✨ <a href="https://codepen.io/thebabydino/pen/abMvzoo" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/abMvzoo</a> ✨ <a href="https://codepen.io/thebabydino/pen/PoLGEPM" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/PoLGEPM</a> ✨ <a href="https://codepen.io/thebabydino/pen/LYvzmLW" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/LYvzmLW</a> ✨ <a href="https://codepen.io/thebabydino/pen/PogJybr" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/PogJybr</a><a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePenChallenge</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/dropShadow" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dropShadow</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMask</a> <a href="https://mastodon.social/tags/text" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#text</a> <a href="https://mastodon.social/tags/textEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#textEffect</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/3d" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#3d</a>

Ana Tudor 🐯3 more such animated pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>, no SVG, single element animated halftone patterns on <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a>:✨ <a href="https://codepen.io/thebabydino/pen/mdmVjaV" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/mdmVjaV</a> ✨ <a href="https://codepen.io/thebabydino/pen/abWdaGO" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/abWdaGO</a> ✨ <a href="https://codepen.io/thebabydino/pen/NWjxaVG" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/NWjxaVG</a><a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/gradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gradient</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/noSVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#noSVG</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯Finally, some pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>, single element halftone patterned cards:✨ <a href="https://codepen.io/thebabydino/pen/QWMRWRQ" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/QWMRWRQ</a> ✨ <a href="https://codepen.io/thebabydino/full/NWxBzRv" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/full/NWxBzRv</a><a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/filterEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filterEffect</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯A couple more such halftone patterns, both of which have a video of me coding them from scratch.✨ <a href="https://codepen.io/thebabydino/pen/LYyNVJQ" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/LYyNVJQ</a> ✨ <a href="https://codepen.io/thebabydino/pen/xxYMOoQ" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/xxYMOoQ</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/cssPattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssPattern</a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssVariables</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/filterEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filterEffect</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯The .jpg image map case is... special. Most of my demos use extra pseudos/ elements and `mix-blend-mode` for compatibility reasons.But Safari, only browser to support `filter()` (*not* `filter`!) allows for the no extra pseudo/ element <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> solution <a href="https://codepen.io/thebabydino/pen/rNgBqNy" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/rNgBqNy</a>For reference, article on `filter()` <a href="https://iamvdo.me/en/blog/advanced-css-filters#filter" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://iamvdo.me/en/blog/advanced-css-filters#filter</a><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/safari" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#safari</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTricks</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯A `linear-gradient()` pattern coupled with a `linear-gradient()` map is what's behind this retro wave <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> demo <a href="https://codepen.io/thebabydino/pen/jOvMQMO" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/jOvMQMO</a>And animating the map's `background-position` is how we get this progressive close/ open blinds effect <a href="https://mastodon.social/@anatudor/110153344888593740" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/110153344888593740</a><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssAnimation</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTricks</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Recent searches

Search options

Administered by:

Server stats:

#halftone