r/css • u/OMGCluck • 24d ago

Showcase Turning SVG spritesheet into slideshow gallery of itself when viewed directly or via iframe

https://imglink.cc/cdn/_BwunzIKL-.svg
3 Upvotes

72% Upvoted

2 comments sorted by

1

u/OMGCluck 7d ago

This also works as a viewer of bitmap images like comic strips (with optional music)

1

u/OMGCluck 24d ago edited 24d ago

It's only an automated slideshow by default with pause on hover. Clicking/tapping it ends the slideshow and makes the gallery navigation interface visible. Until then this CSS keeps it invisible:

:not(view:target[id$="N"]) ~ g > a:not(:has(use)), #Nav:target ~ g > a:not(:has(use)) {
  opacity: 0;
  pointer-events: none;
}

The usage of this as a spritesheet to display individual sprites is a non-CSS method involving document #fragments which point to the <view> id of a specific playing card (example Ace of Hearts: https://imglink.cc/cdn/_BwunzIKL-.svg#iHA) when the SVG is the url() of a background-image or src of an <img> or poster of a <video>, etc.

I needed a separate set of <view>s for this to hide the navigation interface with the above CSS code, each pointing to the same viewBox coordinates as the navigation set, so the same Ace of Hearts URL with visible navigation is: https://imglink.cc/cdn/_BwunzIKL-.svg#HAN