#cssmipmap — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #cssmipmap, aggregated by home.social.
-
Omigosh, I think I've just invented a completely new #HTML / #CSS technique! :O
How do I explain this? HTML/CSS has popovers now -- if you add a `popover` attribute to an element, it gets hidden by default and any `<button>` or `<input>` (oddly, *only* those elements allowed) that points to it with `popovertarget` will make the popover appear.
Nice, but now you have two elements -- the thing you click, and the popover that appears.
I wanted to make the image thumbnail on the left, open an expanded version when clicked on. Two elements, right? The one in the sidebar, and a copy for the big popover. Two copies of the image, two copies of the text.
I discovered how to make an element popover itself.
Ah, but that tiny image in the sidebar isn't going to do when you expand it to fill the screen, no?
By using a `srcset` attribute, you can have multiple images that are chosen based on the size of the element...
```html
<img srcset="
pages/images/tower-of-balal-1-thumb.jpg 320w,
pages/images/tower-of-balal-1.jpg 1929w
" />
```In the screenshots, you are looking at the *same* `<figure>` element as in the sidebar popped out to fill the screen. All in HTML / CSS. No #javascript!
This is probably a *big deal* to those who understand what it means.
-- edit: I am coining the term "CSS mipmap" to describe this image technique of creating a pop-out / lightbox with a shared image element -- #cssmipmap
-
Omigosh, I think I've just invented a completely new #HTML / #CSS technique! :O
How do I explain this? HTML/CSS has popovers now -- if you add a `popover` attribute to an element, it gets hidden by default and any `<button>` or `<input>` (oddly, *only* those elements allowed) that points to it with `popovertarget` will make the popover appear.
Nice, but now you have two elements -- the thing you click, and the popover that appears.
I wanted to make the image thumbnail on the left, open an expanded version when clicked on. Two elements, right? The one in the sidebar, and a copy for the big popover. Two copies of the image, two copies of the text.
I discovered how to make an element popover itself.
Ah, but that tiny image in the sidebar isn't going to do when you expand it to fill the screen, no?
By using a `srcset` attribute, you can have multiple images that are chosen based on the size of the element...
```html
<img srcset="
pages/images/tower-of-balal-1-thumb.jpg 320w,
pages/images/tower-of-balal-1.jpg 1929w
" />
```In the screenshots, you are looking at the *same* `<figure>` element as in the sidebar popped out to fill the screen. All in HTML / CSS. No #javascript!
This is probably a *big deal* to those who understand what it means.
-- edit: I am coining the term "CSS mipmap" to describe this image technique of creating a pop-out / lightbox with a shared image element -- #cssmipmap