Swipey Picture Grids

No Comments

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″/>

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

CodePen Embed Fallback

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 ArticlePermalink

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

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

    About us and this blog

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment