Swipey Picture Grids

I hope folks consider SVG as a vector format that’s good for drawing issues. There may be a lot extra to know, however right here’s yet another: SVG is nice for composition. You draw issues at very particular coordinates in SVG and, whereas they’ll scale, they have a tendency to remain put. And whereas SVG is a vector format, you may place raster photos onto it. That’s my favourite a part of Cassie’s “Swipey picture grids” publish. The swipey half is cool, however the composition is even cooler.

<svg viewBox=”0 0 100 100″>
<rect x=”30″ y=”0″ width=”70″ top=”50″ fill=”blue”/>
<rect x=”60″ y=”60″ width=”40″ top=”40″ fill=”inexperienced”/>
<rect x=”0″ y=”30″ width=”50″ top=”70″ fill=”pink”/>

<picture x=”30″ y=”0″ width=”70″ top=”50″ href=”https://place-puppy.com/300×300″/>
<picture x=”60″ y=”60″ width=”40″ top=”40″ href=”https://place-puppy.com/700×300″/>
<picture x=”0″ y=”30″ width=”50″ top=”70″ href=”https://place-puppy.com/800×500″/>
</svg>

You’ll have to examine this out in Chrome, Edge or Firefox:

Don’t miss Cassie’s interactive examples explaining preserveAspectRatio. That’s a factor I usually consider on the <svg> itself, however is used to nice impact on the <picture> parts themselves right here. It’s like a extra highly effective object-fit and object-position.

Direct Hyperlink to Article — Permalink

The publish Swipey Picture Grids appeared first on CSS-Methods.

You may help CSS-Methods by being an MVP Supporter.