Pawb.Social Reports @transparency

Blender Dumbass ( J.Y.Amihud )From: blenderdumbass . orgI want to document the way you might have a possibility to use the same software to make a similar website. @Madiator2011 already done that with blog.madiator.com. Lets go over: where you get the code, how do you set it up, how do you publish, how do you manage accounts, and most importantly, how do you modify everything, so it will look like your own thing.Read or listen: <a href="https://blenderdumbass.org/articles/how_to_make_a_blog_like_mine_using_bdserver_software_" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://blenderdumbass.org/articles/how_to_make_a_blog_like_mine_using_bdserver_software_</a><a href="https://mastodon.online/tags/blog" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blog</a> <a href="https://mastodon.online/tags/blogging" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blogging</a> <a href="https://mastodon.online/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.online/tags/website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#website</a> <a href="https://mastodon.online/tags/python" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#python</a> <a href="https://mastodon.online/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://mastodon.online/tags/BDServer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#BDServer</a>

Mew :BlahajWavingTransFlag:Why do people default to React and JavaScript for front end and UIs?As a backend developer whose frontend experience is mostly from using Phoenix and Django, which utilize server-side rendering, I’m wondering why most people choose React and JavaScript as the “default” frontend solution, even for pages and SaaS products that don’t really benefit from any additional client-side interactivity.<a href="https://sipstea.town/tags/Web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Web</a> <a href="https://sipstea.town/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://sipstea.town/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://sipstea.town/tags/React" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#React</a> <a href="https://sipstea.town/tags/Phoenix" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Phoenix</a> <a href="https://sipstea.town/tags/Django" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Django</a> <a href="https://sipstea.town/tags/Programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Programming</a> <a href="https://sipstea.town/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://sipstea.town/tags/FrontendDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontendDevelopment</a>

gaylie :verifiedlesbian:improving on my virtual pets site ever so slightly :blobcat3c:<a href="https://aethy.com/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Curtis WilcoxWeb <a href="https://c.im/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> folks, especially ones who get involved with specs, what do you think about CSS Overflow Module Level 5? It's "adding the ability to generate and associate various scrolling controls (markers to indicate scroll progress, buttons to trigger scrolling)…"Chrome 135 (next month?) is shipping with support for pseudo-elements that:* have semantic roles. * are in the focus order. * are named by the `content` property. * user-agent defined behaviors (moving the associated scroll area).`scroll-marker-group` creates a whole ARIA tabs pattern, minus the tabpanels! Well, "whole" except the tabs aren't named.<a href="https://developer.chrome.com/blog/carousels-with-css" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.chrome.com/blog/carousels-with-css</a><a href="https://drafts.csswg.org/css-overflow-5/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://drafts.csswg.org/css-overflow-5/</a><a href="https://c.im/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a> <a href="https://c.im/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a>

Robert KingettOne thing I am loving about <a href="https://fosstodon.org/@eleventy" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@eleventy</a> is I can make one snippet and use it everywhere, and if I wanna update that one snippet I just change the NJK file, like this one. Displays all tags with a counter! <a href="https://github.com/rkingett/myblog/blob/main/_includes/tags.njk" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/rkingett/myblog/blob/main/_includes/tags.njk</a> <a href="https://caneandable.social/tags/11ty" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#11ty</a> <a href="https://caneandable.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://caneandable.social/tags/Eleventy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Eleventy</a>

Jason the fox 🔜 Giant fox mawso ive noticed something. i get lots of bots scraping my site, but they DONT seem to load the image resources.this has me wondering how well a no-js proof of work "captcha" type thing would work that basically just checks if the browser loaded an image then sets a TEMPORARY RANDOM session cookie.in case someone wants to leave an antagonistic reply, let me state that i KNOW this would be easy to circumvent. but i think this would stop non-targeted scraping from basic bots. <a href="https://gulp.cafe/tags/captcha" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#captcha</a> <a href="https://gulp.cafe/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Python Weekly 🐍Django 5.2 release candidate 1 released<a href="https://www.djangoproject.com/weblog/2025/mar/19/django-52-rc1/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.djangoproject.com/weblog/2025/mar/19/django-52-rc1/</a>Discussions: <a href="https://discu.eu/q/https://www.djangoproject.com/weblog/2025/mar/19/django-52-rc1/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://discu.eu/q/https://www.djangoproject.com/weblog/2025/mar/19/django-52-rc1/</a><a href="https://mastodon.social/tags/django" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#django</a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://mastodon.social/tags/python" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#python</a> <a href="https://mastodon.social/tags/release" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#release</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a>🚫 DON'T use layered text-shadows for text outlines just because text-stroke is broken (<a href="https://mastodon.social/@anatudor/112410224855133935" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/112410224855133935</a>), they are going to produce ugly corners, thickened roundings and angled lines.✅ DO: use `paint-order: stroke fill` instead!<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typography</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> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Ana Tudor 🐯Among other things, I also go into the how behind the minimum alpha for the semi-transparent black overlay so we can be sure of having enough contrast.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</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>

Erik L. Midtsveen 🚩🏴So, Erik was bored?Yes!- <a href="https://midtsveen.github.io/duck.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://midtsveen.github.io/duck.html</a><a href="https://social.linux.pizza/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://social.linux.pizza/tags/Website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Website</a> <a href="https://social.linux.pizza/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://social.linux.pizza/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://social.linux.pizza/tags/Programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Programming</a> <a href="https://social.linux.pizza/tags/ProgrammingHumor" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ProgrammingHumor</a> <a href="https://social.linux.pizza/tags/Duck" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Duck</a> <a href="https://social.linux.pizza/tags/DuckSpinningGeometryDash" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DuckSpinningGeometryDash</a> <a href="https://social.linux.pizza/tags/GeometryDash" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GeometryDash</a> <a href="https://social.linux.pizza/tags/DuckSpinning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DuckSpinning</a> <a href="https://social.linux.pizza/tags/Spinning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Spinning</a> <a href="https://social.linux.pizza/tags/Memes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Memes</a> <a href="https://social.linux.pizza/tags/Meme" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Meme</a> <a href="https://social.linux.pizza/tags/Humor" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Humor</a> <a href="https://social.linux.pizza/tags/Laugh" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Laugh</a> <a href="https://social.linux.pizza/tags/GitHubPages" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GitHubPages</a> <a href="https://social.linux.pizza/tags/GitHub" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GitHub</a>

𝐇𝐔𝐍𝐓𝐄𝐑 🔪<h2>⛓️ <a href="https://hellaonwheels.neocities.org/freecodes/redsky" rel="nofollow noopener noreferrer" target="_blank">REDSKY</a> [f2u oc profile template]</h2><blockquote>based off of that stupid blue social media site. you know which one. features: view replies by clicking on a post, tabs, gallery, automatically calculated post and reply count.</blockquote><a href="https://aethy.com/tags/HunterCodesThings" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HunterCodesThings</a> <a href="https://aethy.com/tags/oc" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#oc</a> <a href="https://aethy.com/tags/mastoart" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mastoart</a> <a href="https://aethy.com/tags/neocities" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#neocities</a> <a href="https://aethy.com/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Ana Tudor 🐯Can't believe this quick little thing made this week's <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> Spark!codepen.io/thebabydino/pen/GgRryoa<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</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/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</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/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>

Ana Tudor 🐯Minimal pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> textile patterns 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/full/OJmpzya" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/full/OJmpzya</a>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!<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/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/patterns" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#patterns</a> <a href="https://mastodon.social/tags/cssPatterns" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssPatterns</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/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> <a href="https://mastodon.social/tags/textile" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#textile</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a>

Ana Tudor 🐯Because someone just hearted this decade old @codepen.io <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#3D</a> demo, I gave it a quick 2025 remake using ✳️ modern <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> features ✳️ - grid instead of `position: absolute`, CSS variables to avoid setting multiple properties in Sass loops, `color-mix()` and more!<a href="https://codepen.io/thebabydino/pen/NNxMaN" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/NNxMaN</a>Based on a GIF by <a href="https://mastodon.social/@sasj" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@sasj</a>, originally CSS-ed 9+ years ago live on CodePen in 10 minutes and 50 lines of SCSS. Now the code is even more compact.<a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTransform</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 🐯Another little <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> demo: pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> double ball 🎱 helix <a href="https://codepen.io/thebabydino/pen/JreoKw" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/JreoKw</a> (yet another demo that cold be simplified by the `position: absolute` to `display: grid` switch for stacking and in the future, further simplified by `sibling-index()`)<a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#3D</a> <a href="https://mastodon.social/tags/helix" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#helix</a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTransform</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> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Ana Tudor 🐯For example, nowadays I wouldn't use `position: absolute` + offsets + negative `margin` 🫤 to stack and place elements in the middle before applying transforms to position them in 3D.I would use grid now. 😻<a href="https://mastodon.social/@anatudor/110712771208508567" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/110712771208508567</a><a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#3D</a> <a href="https://mastodon.social/tags/css3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css3D</a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTransform</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> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Ana Tudor 🐯Someone hearted this old thing <a href="https://codepen.io/thebabydino/pen/GNYvbZ" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/GNYvbZ</a> on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> and I noticed it said Chrome-only - tested and it's not the case anymore, it works cross-browser.Do note that it's 8+ years old, before <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> variables, grid, newer functions and could be much simplified using these.<a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#3D</a> <a href="https://mastodon.social/tags/css3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css3D</a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTransform</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> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Ana Tudor 🐯Some single `button` sets I made on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> a while back:🎇 <a href="https://codepen.io/thebabydino/pen/dLLxdj" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/dLLxdj</a>🎇 <a href="https://codepen.io/thebabydino/pen/QBOKPy" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/QBOKPy</a>🎇 <a href="https://codepen.io/thebabydino/pen/qyVyKb" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/qyVyKb</a>🎇 <a href="https://codepen.io/thebabydino/pen/jpaZBy" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/jpaZBy</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/button" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#button</a> <a href="https://mastodon.social/tags/buttons" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#buttons</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/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>

Ana Tudor 🐯If we have an inline `span` inside a `p` & we give it a semi-transparent `background` + a `padding`, we get an alpha increase where backgrounds of adjacent lines overlap.How would you solve this problem without text duplication, without stacking 2 identical `p` elements, one for background (opaque background + transparent text + opacity) and one for text (transparent background)?<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</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/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</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/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/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>

Ana Tudor 🐯Hi, mastodon 🦣 I have a new article out!A Deep Dive into the Inline Background Overlap Problem: <a href="https://frontendmasters.com/blog/overlapping-inline-backgrounds/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontendmasters.com/blog/overlapping-inline-backgrounds/</a>How do you get the below result (semi-transparent background on inline span) with large padding & no overlap?Answer in article, but think a bit about it first. 😼<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</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/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</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/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/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>

Recent searches

Search options

Administered by:

Server stats:

#webdev