Lucy @lucy

**CX-7** @cx7@mastodon.social · 2h

**Metin Seven** @metin@graphics.social · 2h

**Ana Tudor** @anatudor@mastodon.social · 3h *

Ever wanted to get the number of auto-fit columns in CSS?

```
--u: 5em;
grid-template-columns: repeat(auto-fit, minmax(var(--u), 1fr))
```

It's now possible! Using registered #CSS vars, the tan division hack and container query units! Here's a little test on @codepen:
https://codepen.io/thebabydino/pen/JojpBJr

GIF

#cssGrid #cssLayout #code

3h *

**Webdev Weekly** @webdev_discussions@mastodon.social · 4h

**.:\dGh/:.** @darkghosthunter@mastodon.social · 8h

.:\dGh/:. @darkghosthunter@mastodon.social

You want a crazy idea? Add an "__outScope" built-in method for classes.

It will run when the scope of the variable that holds the class instance ends.

Imagine the possibilities.

#PHP #Programming #Software

**Captain Steph** @sirber@fosstodon.org · 10h

**Hacker News Discussions** @hn_discussions@mastodon.social · 2025-03-12T16:00:00.000Z

**Ruby Weekly** @ruby_discussions@mastodon.social · 10h

**Python Weekly** @python_discussions@mastodon.social · 10h

**Golang Weekly** @golang_discussions@mastodon.social · 2025-03-13T21:14:00.000Z

**Martine Dowden** @martine_dowden@mastodon.social · 11h

**Ana Tudor** @anatudor@mastodon.social · 13h

Ana Tudor @anatudor@mastodon.social

Because I saw a @codepen demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...

Here's a super simple modern #CSS grid + clip-path + mathematical functions responsive version with no breakpoints https://codepen.io/thebabydino/pen/QwWQqeR

Screenshot of linked demo with DevTools open, highlighting the main grid and showing there are no media queries at play.

#cssLayout #cssGrid #clipPath

13h

**Webdev Weekly** @webdev_discussions@mastodon.social · 16h

**Paul Keen** @pftg@ruby.social · 17h

**omg! ubuntu** @omgubuntu@floss.social · 2025-03-17T16:25:52.000Z

**Captain Steph** @sirber@fosstodon.org · 18h

**Deno** @deno_land@fosstodon.org · 18h

**Ana Tudor** @anatudor@mastodon.social · 19h

Ana Tudor @anatudor@mastodon.social

Because this quick @codepen thing I made is getting hearted for some reason... corner grid item with inner corner rounding and text wrapping around the corner

https://codepen.io/thebabydino/pen/LEYObpy

Some grid + shape-outside + container query units #CSS magic + #SVG #filter magic.

¯\_(ツ)_/¯

#cssLayout #cssGrid #code

19h

**Webdev Weekly** @webdev_discussions@mastodon.social · 20h

**Ana Tudor** @anatudor@mastodon.social · 20h

Ana Tudor @anatudor@mastodon.social

Safari supports the `filter()` function, which allows us to apply a filter to just the `border-image-source`. It's not ideal, as we still need to have the image link twice, once in the `src` attribute and once in a custom property set on the same `img`. Oh, well... at least it doesn't require any extra elements, just the `img` suffices.

@codepen demo, but remember, it only works in Safari https://codepen.io/thebabydino/pen/XWxdyro

$The CSS (Safari only): ``` img { /* allocate border space */ border: solid .5em; /* border gradient from `src` atribute of `<img>` */ /* src() not yet implemented anywhere */ /* attr() just implemented by Chrome */ border-image: /* huge blur on img src for gradient-like result */ /* filter() only implemented by Safari */ filter(var(--src), blur(99px)) 10%; /* create transparent gap to border */ padding: .5em } ``` The Pug: ``` - let my_img = 'my-cool-image.jpg'; img(src=my_img style=`--src: url(${my_img})`) ```$

Visual result: images surrounded by a gap then by a gradient border using a palette obtained from the image.

#CSS #filter #cssFilter

20h

Recent searches

Search options

Administered by:

Server stats:

#WebDev

Recent searches

Search options

Administered by:

Server stats:

webDev

#WebDev