#Tag · bonfire.cafe

I am begging you, please don't split your heading into two separate `h2` elements with an `img` in between just to have the image in between your heading words.

This is what subgrid was made for!

#CSS #layout #cssLayout #code #coding #web #dev #webDev #webDevelopment

HTML:

```
<!-- ❌ DON'T DO THIS 🚫 -->
<section>
<h2>Classic</h2>
<img src='classic-bar.png' alt=''/>
<h2>Flavour</h2>
</section>

<!-- ✅ DO THIS ✅ -->
<section>
<h2>
<span>Classic</span>
<span>Flavour</span>
</h2>
<img src='classic-bar.png' alt='the classic chocolate bar'/>
</section>
```

CSS:

```
section, h2 { display: grid }

section { grid-template-rows: repeat(3, auto) }

h2 {
grid-area: 1/ 1/ span 3;
grid-template-rows: subgrid;

span:last-child { grid-row: 3 }
}

img { grid-area: 2/ 1 }
``` — HTML: ``` <!-- ❌ DON'T DO THIS 🚫 --> <section> <h2>Classic</h2> <img src='classic-bar.png' alt=''/> <h2>Flavour</h2> </section> <!-- ✅ DO THIS ✅ --> <section> <h2> <span>Classic</span> <span>Flavour</span> </h2> <img src='classic-bar.png' alt='the classic chocolate bar'/> </section> ``` CSS: ``` section, h2 { display: grid } section { grid-template-rows: repeat(3, auto) } h2 { grid-area: 1/ 1/ span 3; grid-template-rows: subgrid; span:last-child { grid-row: 3 } } img { grid-area: 2/ 1 } ```

Ana Tudor 🐯

@anatudor@mastodon.social · 3 months ago

I am begging you, please don't split your heading into two separate `h2` elements with an `img` in between just to have the image in between your heading words.

This is what subgrid was made for!

#CSS #layout #cssLayout #code #coding #web #dev #webDev #webDevelopment

Roni Rolle Laukkarinen boosted

Ana Tudor 🐯

@anatudor@mastodon.social · 3 months ago

I have a new article out!

Super Simple Full-Bleed & Breakout Styles
https://frontendmasters.com/blog/super-simple-full-bleed-breakout-styles/ - my take on an old problem using modern CSS solutions.

Using a spooky made up Halloween recipe to illustrate concepts.

PS @chriscoyier told me to be proud of it 😛

#CSS #cssLayout #cssGrid #cssVariables #containerQueries #containerQuery #code #web #webDev #webDevelopment #dev #coding #frontend #Halloween

Ana Tudor 🐯

@anatudor@mastodon.social · 3 months ago

I have a new article out!

Super Simple Full-Bleed & Breakout Styles
https://frontendmasters.com/blog/super-simple-full-bleed-breakout-styles/ - my take on an old problem using modern CSS solutions.

Using a spooky made up Halloween recipe to illustrate concepts.

PS @chriscoyier told me to be proud of it 😛

#CSS #cssLayout #cssGrid #cssVariables #containerQueries #containerQuery #code #web #webDev #webDevelopment #dev #coding #frontend #Halloween

Roni Rolle Laukkarinen boosted

Ana Tudor 🐯

@anatudor@mastodon.social · 5 months ago

#cssChallenge2025 How would you code this with:

✨ 1 HTML element, no JS, no SVG
✨ inner border interrupted by text box shape
✨ responsive
✨ text wraps depending on space
✨ contenteditable
✨ 1 image = the background one

(if you're Cheetah+ on Ko-fi/ Patreon, you know where to find the answer)

#CSS #cssLayout #code #coding #frontend #web #dev #webDev #webDevelopment

Ana Tudor 🐯

@anatudor@mastodon.social · 5 months ago

#cssChallenge2025 How would you code this with:

✨ 1 HTML element, no JS, no SVG
✨ inner border interrupted by text box shape
✨ responsive
✨ text wraps depending on space
✨ contenteditable
✨ 1 image = the background one

(if you're Cheetah+ on Ko-fi/ Patreon, you know where to find the answer)

#CSS #cssLayout #code #coding #frontend #web #dev #webDev #webDevelopment

Roni Rolle Laukkarinen boosted

Ana Tudor 🐯

@anatudor@mastodon.social · 7 months ago

2️⃣ feColorMatrix: swap channels ☆ interactive demo, adaptive layout - check it out on @codepenhttps://codepen.io/thebabydino/full/QWopRMK

An interactive, responsive demo illustrating how feColorMatrix can be used to swap channels. Another very special one.

#SVG #filter #svgFilter #JS #interactive #javascript #code #coding #frontend #CSS #web #dev #webDevelopment #webDev #cssGrid #cssLayout

Behind the demo https://mastodon.social/@anatudor/112242678457752295

Ana Tudor 🐯

@anatudor@mastodon.social · 7 months ago

2️⃣ feColorMatrix: swap channels ☆ interactive demo, adaptive layout - check it out on @codepenhttps://codepen.io/thebabydino/full/QWopRMK

An interactive, responsive demo illustrating how feColorMatrix can be used to swap channels. Another very special one.

#SVG #filter #svgFilter #JS #interactive #javascript #code #coding #frontend #CSS #web #dev #webDevelopment #webDev #cssGrid #cssLayout

Behind the demo https://mastodon.social/@anatudor/112242678457752295

Roni Rolle Laukkarinen boosted

Ana Tudor 🐯

@anatudor@mastodon.social · 7 months ago

If a grid has n columns, it has n - 1 gaps in between them. Enjoy this interactive @codepen demo illustrating the concept: https://codepen.io/thebabydino/pen/LEVqOpZ

#CSS #cssGrid #cssLayout #code #coding #web #dev #webDev #webDevelopment #frontend

Screenshot of linked demo. Shows items distributed on 5 columns, with 4 gaps highlighted between them.

Ana Tudor 🐯

@anatudor@mastodon.social · 7 months ago

If a grid has n columns, it has n - 1 gaps in between them. Enjoy this interactive @codepen demo illustrating the concept: https://codepen.io/thebabydino/pen/LEVqOpZ

#CSS #cssGrid #cssLayout #code #coding #web #dev #webDev #webDevelopment #frontend