MastodonTech.de

Ana Tudor 🐯2️⃣ `feColorMatrix`: swap channels ☆ interactive demo, adaptive layout - check it out on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/full/QWopRMK" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/full/QWopRMK</a>An interactive, responsive demo illustrating how `feColorMatrix` can be used to swap channels. Another very special one.<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://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#svgFilter</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> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <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/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</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/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> Behind the demo <a href="https://mastodon.social/@anatudor/112242678457752295" rel="nofollow noopener" translate="no" target="_blank">https://mastodon.social/@anatudor/112242678457752295</a>

Ana Tudor 🐯Help? 😟Stupid <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#layout</a> question: why isn't my <a href="https://mastodon.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#subgrid</a> respected?<a href="https://codepen.io/thebabydino/pen/xbGeReB" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/xbGeReB</a><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/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</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/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</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/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#Techniques</a> Safe align your content · The CSS ‘safe’ keyword is worth knowing <a href="https://ilo.im/164jgu" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/164jgu</a>_____ <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#Layout</a> <a href="https://mastodon.social/tags/Container" class="mention hashtag" rel="nofollow noopener" target="_blank">#Container</a> <a href="https://mastodon.social/tags/Alignment" class="mention hashtag" rel="nofollow noopener" target="_blank">#Alignment</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/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssGrid</a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssFlexbox</a>

Ana Tudor 🐯If a grid has `n` columns, it has `n - 1` gaps in between them. Enjoy this interactive <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> demo illustrating the concept: <a href="https://codepen.io/thebabydino/pen/LEVqOpZ" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/LEVqOpZ</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> <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/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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</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/Previews" class="mention hashtag" rel="nofollow noopener" target="_blank">#Previews</a> A new way to style gaps · Say hello to consistent separators across CSS layouts <a href="https://ilo.im/164kgh" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/164kgh</a>_____ <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#Layout</a> <a href="https://mastodon.social/tags/Chrome" class="mention hashtag" rel="nofollow noopener" target="_blank">#Chrome</a> <a href="https://mastodon.social/tags/Edge" class="mention hashtag" rel="nofollow noopener" target="_blank">#Edge</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#Browser</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/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssGrid</a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssFlexbox</a> <a href="https://mastodon.social/tags/CssMultiColumn" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssMultiColumn</a>

Ana Tudor 🐯I made a little thing 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> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> controlled swipe transition <a href="https://codepen.io/thebabydino/pen/azObZOe" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/azObZOe</a>Note how the swipe always clockwise, regardless of scroll direction and how the text fades in after the swipe in.Inspiration <a href="https://x.com/avanderpotte/status/1923382432784412771" rel="nofollow noopener" translate="no" target="_blank">https://x.com/avanderpotte/status/1923382432784412771</a> (via <a href="https://mastodon.social/@codrops" class="u-url mention" rel="nofollow noopener" target="_blank">@codrops</a> motion highlights roundup) cc <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@bramus</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <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/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssMask</a> <a href="https://mastodon.social/tags/conicGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#conicGradient</a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssMaths</a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#maths</a> <a href="https://mastodon.social/tags/scrollEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollEffect</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</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>

Ana Tudor 🐯5️⃣ 850 ♥️ No SVG, no image fluid slider <a href="https://codepen.io/thebabydino/pen/qByGqOm" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/qByGqOm</a><a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#JS</a> used only for a) feature support detection b) updating slider value in --valUses only 1 × input[type=range] for actual slider 1 × output for current value display 1 × datalist for rulerOne of my best sliders on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a>. <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/slider" class="mention hashtag" rel="nofollow noopener" target="_blank">#slider</a> <a href="https://mastodon.social/tags/rangeInput" class="mention hashtag" rel="nofollow noopener" target="_blank">#rangeInput</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</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/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssMask</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGradient</a>

Inautilo<a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#Design</a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener" target="_blank">#Guides</a> Figma’s new grid · How the shift to CSS Grid affects designers <a href="https://ilo.im/163twe" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/163twe</a>_____ <a href="https://mastodon.social/tags/Figma" class="mention hashtag" rel="nofollow noopener" target="_blank">#Figma</a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#Layout</a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssGrid</a> <a href="https://mastodon.social/tags/ProductDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#ProductDesign</a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#UiDesign</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDesign</a> <a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</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>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#Techniques</a> The CSS height enigma · Unraveling the mystery of percentage-based heights <a href="https://ilo.im/163u5k" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/163u5k</a>_____ <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#Layout</a> <a href="https://mastodon.social/tags/CssUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssUnits</a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssGrid</a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssFlexbox</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>

Ana Tudor 🐯A little pill shape. Because someone asked how to do this, I had to come up with a solution that uses no extra elements for the rounded side decorations, but also doesn't replace the 4 extra elements with at least just as many background layers. <a href="https://www.reddit.com/r/css/comments/1ke0n1q/comment/mqhm6o0/" rel="nofollow noopener" translate="no" target="_blank">https://www.reddit.com/r/css/comments/1ke0n1q/comment/mqhm6o0/</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <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/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</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>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Releases" class="mention hashtag" rel="nofollow noopener" target="_blank">#Releases</a> CSS ‘reading-flow’ and ‘reading-order’ · New properties to make visual order accessible <a href="https://ilo.im/163mvw" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/163mvw</a>_____ <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#Layout</a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#Accessibility</a> <a href="https://mastodon.social/tags/Keyboard" class="mention hashtag" rel="nofollow noopener" target="_blank">#Keyboard</a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssGrid</a> <a href="https://mastodon.social/tags/CssFlex" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssFlex</a> <a href="https://mastodon.social/tags/Chrome" class="mention hashtag" rel="nofollow noopener" target="_blank">#Chrome</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#Browser</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>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="nofollow noopener" target="_blank">#Approaches</a> Out of order · How to deal with visual reordering issues in CSS? <a href="https://ilo.im/163d1y" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/163d1y</a>_____ <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#Layout</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssGrid</a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssFlexbox</a> <a href="https://mastodon.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#DesignSystem</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDesign</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/DOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#DOM</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Ana Tudor 🐯Haven't had it in me to do anything for the past week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePenChallenge</a>, so here's a demo from earlier this year that fits: <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> infinite scroll gallery <a href="https://codepen.io/thebabydino/pen/XJrYqGb" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/XJrYqGb</a>One of my most hearted demos ever & my only one to get over 1000 ❤️ without being in the most hearted of previous year.<a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#3D</a> <a href="https://mastodon.social/tags/cssTransforms" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTransforms</a> <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/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>

Ana Tudor 🐯Irregular shaped image with both convex & concave roundings. Shape depends on other elements, how they scale/ wrap. Flexible layout depending on viewport.Because someone asked how to <a href="https://www.reddit.com/r/css/comments/1k60u7w/comment/momcgkp/" rel="nofollow noopener" translate="no" target="_blank">https://www.reddit.com/r/css/comments/1k60u7w/comment/momcgkp/</a>Live on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/LEExpVg" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/LEExpVg</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#subgrid</a> + <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> magic.<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/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#layout</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/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</a>

Ana Tudor 🐯Here's a quick responsive clover layout on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/RNwmjEQ?editors=0100" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/RNwmjEQ?editors=0100</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#layout</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/containerQuery" class="mention hashtag" rel="nofollow noopener" target="_blank">#containerQuery</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</a> <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/responsive" class="mention hashtag" rel="nofollow noopener" target="_blank">#responsive</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/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</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>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Previews" class="mention hashtag" rel="nofollow noopener" target="_blank">#Previews</a> First look at the modern attr() · A new way to use CSS with HTML data attributes <a href="https://ilo.im/16357k" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/16357k</a>_____ <a href="https://mastodon.social/tags/Data" class="mention hashtag" rel="nofollow noopener" target="_blank">#Data</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/InlineCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#InlineCSS</a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssGrid</a> <a href="https://mastodon.social/tags/Chrome" class="mention hashtag" rel="nofollow noopener" target="_blank">#Chrome</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#Browser</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/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Sebin NyshkimStarting to get the hang of and jive with CSS Grid for this new project I've been working on for the past week ❤️<a href="https://meow.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://meow.social/tags/cssgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssgrid</a> <a href="https://meow.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a>

Ana Tudor 🐯How would you create this in such a way that its individual parts can be scaled independently, including via <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> animations/ transitions?Here's my take on it <a href="https://www.reddit.com/r/css/comments/1jp1cgu/comment/mkw30mh/" rel="nofollow noopener" translate="no" target="_blank">https://www.reddit.com/r/css/comments/1jp1cgu/comment/mkw30mh/</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</a> <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://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/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/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>

Ana Tudor 🐯Here's another such example on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/azbLBJy" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/azbLBJy</a>Concave rounding, gradient background, shape drop-shadow, responsivity... all in one demo. Also using an <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://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/grid" class="mention hashtag" rel="nofollow noopener" target="_blank">#grid</a>.<a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</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/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a>

Ana Tudor 🐯Because I keep seeing `position: absolute` + lots of of offset + size + transform + sometimes even margin properties to stack + middle align the stacked items... you can easily do it with 3 <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> properties!<a href="https://mastodon.social/@anatudor/113774781963966085" rel="nofollow noopener" translate="no" target="_blank">https://mastodon.social/@anatudor/113774781963966085</a><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</a> <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/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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a>

Frühere Suchanfragen

Suchoptionen

Verwaltet von:

Serverstatistik:

#cssgrid