MastodonTech.de

Ana Tudor 🐯Saw <a href="https://mastodon.social/@codepo8@toot.cafe/114705664551095252" rel="nofollow noopener" translate="no" target="_blank">https://mastodon.social/@codepo8@toot.cafe/114705664551095252</a>Since that logo is a 12KB complicated .svg, I recreated something of the kind on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> with <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> + <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> + an extrusion <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#filter</a> <a href="https://codepen.io/thebabydino/pen/zxGJJzX" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/zxGJJzX</a>... with under 10% the total amount of code! 🥳<a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/textEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#textEffect</a> <a href="https://mastodon.social/tags/textEffects" class="mention hashtag" rel="nofollow noopener" target="_blank">#textEffects</a>

Eric Mächler 🖖Slider Checkbox designen (HTML & CSS) <a href="https://www.chefblogger.me/2025/04/23/slider-checkbox-designen-html-css/?utm_source=mastodon&utm_medium=social" rel="nofollow noopener" translate="no" target="_blank">https://www.chefblogger.me/2025/04/23/slider-checkbox-designen-html-css/?utm_source=mastodon&utm_medium=social</a> <a href="https://masto.maechler.cloud/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://masto.maechler.cloud/tags/css3" class="mention hashtag" rel="nofollow noopener" target="_blank">#css3</a> <a href="https://masto.maechler.cloud/tags/ececec" class="mention hashtag" rel="nofollow noopener" target="_blank">#ececec</a> <a href="https://masto.maechler.cloud/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a>

Frontend DogmaScope in CSS, by <a href="https://front-end.social/@chriscoyier" class="u-url mention" rel="nofollow noopener" target="_blank">@chriscoyier</a> (@frontendmasters.com):<a href="https://frontendmasters.com/blog/scope-in-css/" rel="nofollow noopener" translate="no" target="_blank">https://frontendmasters.com/blog/scope-in-css/</a><a href="https://mas.to/tags/slides" class="mention hashtag" rel="nofollow noopener" target="_blank">#slides</a> <a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mas.to/tags/scope" class="mention hashtag" rel="nofollow noopener" target="_blank">#scope</a>

Timo Tijhof<a href="https://front-end.social/@leaverou" class="u-url mention" rel="nofollow noopener" target="_blank">@leaverou</a> <a href="https://w3c.social/@tink" class="u-url mention" rel="nofollow noopener" target="_blank">@tink</a> <a href="https://mastodon.social/@dmitrysharabin" class="u-url mention" rel="nofollow noopener" target="_blank">@dmitrysharabin</a> You may be interested in this proposal: Element.currentLang and currentDir.Basically the "computed" version of the attributes, akin to what we already have in CSS :lang() and :dir() pseudo-class functions.<a href="https://github.com/whatwg/html/issues/7039" rel="nofollow noopener" translate="no" target="_blank">https://github.com/whatwg/html/issues/7039</a><a href="https://fosstodon.org/tags/whatwg" class="mention hashtag" rel="nofollow noopener" target="_blank">#whatwg</a> <a href="https://fosstodon.org/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://fosstodon.org/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a>

Doug Parker 🕸️Anyone know if it's possible to remove all <a href="https://techhub.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> variables on an element?I'm thinking something like `all: initial;` but covering inherited CSS variables.The solutions I'm finding involving looking at loaded stylesheets on the page, which feels way more heavyweight than this should be.

Frontend DogmaHow to Keep Up With New CSS Features, by <a href="https://front-end.social/@sachagreif" class="u-url mention" rel="nofollow noopener" target="_blank">@sachagreif</a> (<a href="https://mastodon.social/@csstricks" class="u-url mention" rel="nofollow noopener" target="_blank">@csstricks</a>):<a href="https://css-tricks.com/how-to-keep-up-with-new-css-features/" rel="nofollow noopener" translate="no" target="_blank">https://css-tricks.com/how-to-keep-up-with-new-css-features/</a><a href="https://mas.to/tags/howtos" class="mention hashtag" rel="nofollow noopener" target="_blank">#howtos</a> <a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mas.to/tags/learning" class="mention hashtag" rel="nofollow noopener" target="_blank">#learning</a> <a href="https://mas.to/tags/linklists" class="mention hashtag" rel="nofollow noopener" target="_blank">#linklists</a>

CSS by T. Afif :verified:📝 New CSS Article!Guess who's writing again about CSS shapes? 🫣This time, I am exploring the corner-shape property. A new tool to easily draw shapes.<a href="https://frontendmasters.com/blog/drawing-css-shapes-using-corner-shape/" rel="nofollow noopener" translate="no" target="_blank">https://frontendmasters.com/blog/drawing-css-shapes-using-corner-shape/</a>⚠️ No browser support yet but a good opportunity to know about this powerful feature and get ready for it!<a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a>

CODEMODDSpeak Their Language: Simple Code Mods for a Multi-Lingual WebsiteIn today's interconnected world, your website has the potential to reach users across the globe.Good news! While large, enterprise-level localization involves many layers, you can start making your web pages multi-lingual with surprisingly simple HTML, CSS, and JavaScript hacksReady to make your website a polyglot?<a href="https://codemodd.blogspot.com/2025/06/speak-their-language-simple-code-mods.html" rel="nofollow noopener" translate="no" target="_blank">https://codemodd.blogspot.com/2025/06/speak-their-language-simple-code-mods.html</a><a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#programming</a> <a href="https://mastodon.social/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#Coding</a> <a href="https://mastodon.social/tags/Computers" class="mention hashtag" rel="nofollow noopener" target="_blank">#Computers</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.social/tags/languages" class="mention hashtag" rel="nofollow noopener" target="_blank">#languages</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

Friday Front-End1fr 1fr vs auto auto vs 50% 50%: "There are several different ways to do equal width columns. But some are, uh, more equal than others." <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://frontendmasters.com/blog/1fr-1fr-vs-auto-auto-vs-50-50/" rel="nofollow noopener" translate="no" target="_blank">https://frontendmasters.com/blog/1fr-1fr-vs-auto-auto-vs-50-50/</a>

roughnecksAnything out of place? I spent a few hours integrating base <a href="https://cyberplace.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> for applications embedded in the site, removed scrollbars (who likes scrollbars!??) and some other fixes. Let me know if you like it! - Let me know even If you don't like it, I will redirect you to /dev/null 😆<a href="https://woodpeckersnest.space/" rel="nofollow noopener" translate="no" target="_blank">https://woodpeckersnest.space/</a><a href="https://cyberplace.social/tags/selfhosting" class="mention hashtag" rel="nofollow noopener" target="_blank">#selfhosting</a> <a href="https://cyberplace.social/tags/dashboard" class="mention hashtag" rel="nofollow noopener" target="_blank">#dashboard</a> <a href="https://cyberplace.social/tags/wpn" class="mention hashtag" rel="nofollow noopener" target="_blank">#wpn</a> <a href="https://cyberplace.social/tags/fedifriends" class="mention hashtag" rel="nofollow noopener" target="_blank">#fedifriends</a>

Peter KrönerTurns out that slotted elements _inherit_ from their slots.👉 <a href="https://codepen.io/SirPepe/pen/qEdMXVE?editors=1000" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/SirPepe/pen/qEdMXVE?editors=1000</a><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Mindsets" class="mention hashtag" rel="nofollow noopener" target="_blank">#Mindsets</a> Selfish reasons for building accessible UIs · “You can build accessibly without having a bleeding heart.“ <a href="https://ilo.im/164oyl" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/164oyl</a>_____ <a href="https://mastodon.social/tags/Responsibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#Responsibility</a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#Accessibility</a> <a href="https://mastodon.social/tags/Naming" class="mention hashtag" rel="nofollow noopener" target="_blank">#Naming</a> <a href="https://mastodon.social/tags/Debugging" class="mention hashtag" rel="nofollow noopener" target="_blank">#Debugging</a> <a href="https://mastodon.social/tags/Testing" class="mention hashtag" rel="nofollow noopener" target="_blank">#Testing</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Peter KrönerFound it!"When comparing two declarations that are sourced from different encapsulation contexts, then for normal rules the declaration from the outer context wins, and for important rules the declaration from the inner context wins. For this purpose, [DOM] tree contexts are considered to be nested in shadow-including tree order."<a href="https://drafts.csswg.org/css-cascade-4/#cascade-sort" rel="nofollow noopener" translate="no" target="_blank">https://drafts.csswg.org/css-cascade-4/#cascade-sort</a><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a>

Peter KrönerWhy exactly is the text red in this example: <a href="https://codepen.io/SirPepe/pen/WbvgOmj?editors=1010" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/SirPepe/pen/WbvgOmj?editors=1010</a>According to the spec, "the specificity of ::slotted() is that of a pseudo-element, plus the specificity of its argument"... which should beat "p", right?Specs: <a href="https://drafts.csswg.org/css-scoping/#slotted-pseudo" rel="nofollow noopener" translate="no" target="_blank">https://drafts.csswg.org/css-scoping/#slotted-pseudo</a><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a>

Ana Tudor 🐯A little something on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a>: pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> icosphere of spheres <a href="https://codepen.io/thebabydino/pen/poYRGmV" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/poYRGmV</a>Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.<a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePenChallenge</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#3D</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/geometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#geometry</a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#maths</a> <a href="https://mastodon.social/tags/mathematics" class="mention hashtag" rel="nofollow noopener" target="_blank">#mathematics</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/recursion" class="mention hashtag" rel="nofollow noopener" target="_blank">#recursion</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/transform" class="mention hashtag" rel="nofollow noopener" target="_blank">#transform</a> <a href="https://mastodon.social/tags/css3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#css3D</a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTransform</a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssVariables</a>

Ana Tudor 🐯Turn black to red CSS linear gradient into step one with a super simple <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#filter</a>: interactive demo allowing to drag a slider to change the number of steps n and see how the visual result and relevant part of the filter code change.<a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> demo <a href="https://codepen.io/thebabydino/full/NPWmorj" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/full/NPWmorj</a>Feedback?<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#JS</a> <a href="https://mastodon.social/tags/interactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#interactive</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener" target="_blank">#Guides</a> Keeping up with new CSS features · There are many ways to stay informed <a href="https://ilo.im/164pwy" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/164pwy</a>_____ <a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ModernCSS</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#Browser</a> <a href="https://mastodon.social/tags/WebPlatform" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebPlatform</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

ValeI went to a bank and put a really high negative margin on all the money inside. This offset was enough for it to appear outside the bank, allowing me to abscond with it.Learn more neat tricks like this in my upcoming book, CSS for Crime.<a class="hashtag" href="https://fedi.vale.rocks/tag/css" rel="nofollow noopener" target="_blank">#CSS</a> <a class="hashtag" href="https://fedi.vale.rocks/tag/csstips" rel="nofollow noopener" target="_blank">#CSSTips</a> <a class="hashtag" href="https://fedi.vale.rocks/tag/webdev" rel="nofollow noopener" target="_blank">#WebDev</a>

Eric Mächler 🖖Wie erstelle ich einen Hintergrund mit Farbverlauf (Nur CSS und HTML) [Anleitung / Tutorial] <a href="https://www.chefblogger.me/2021/03/10/wie-erstelle-ich-einen-hintergrund-mit-farbverlauf-nur-css-und-html-anleitung-tutorial/?utm_source=mastodon&utm_medium=social" rel="nofollow noopener" translate="no" target="_blank">https://www.chefblogger.me/2021/03/10/wie-erstelle-ich-einen-hintergrund-mit-farbverlauf-nur-css-und-html-anleitung-tutorial/?utm_source=mastodon&utm_medium=social</a> <a href="https://masto.maechler.cloud/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://masto.maechler.cloud/tags/css3" class="mention hashtag" rel="nofollow noopener" target="_blank">#css3</a>

Tobias ZeumerHow to Keep Up With New CSS Features | CSS-Tricks<a href="https://css-tricks.com/how-to-keep-up-with-new-css-features/" rel="nofollow noopener" translate="no" target="_blank">https://css-tricks.com/how-to-keep-up-with-new-css-features/</a>Oh, the State of CSS survey is open... And ßmore good sources.<a href="https://openbiblio.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

Frühere Suchanfragen

Suchoptionen

Verwaltet von:

Serverstatistik:

#css