<picture> <source srcset=”examples/images/extralarge.jpg” media=”(min-width: 1000px)”> <source srcset=”examples/images/large.jpg” media=”(min-width: 800px)”> <source srcset=”examples/images/medium.jpg”> <img srcset=”examples/images/medium.jpg” alt=”A giant stone face at The Bayon temple in Angkor Thom, Cambodia”> </picture> The picture element and associated features are W3C standard HTML features that allow web developers to deliver an appropriate image to every user depending on a variety of conditions …
Tag Archives: web
Getting modular with CSS animations
Neat little example showing how to combine CSS animations: Check out this Pen! Beware with animationend though, Firefox still has its quirks with it (in my experience it will fire most of the time, but sometimes it won’t). A video walking through the code is available Getting modular with CSS animations →
Content-out Layout
Grids serve well to divide up a predefined canvas and guide how content fits onto a page, but when designing for the web’s fluid nature, we need something more… well, responsive. Enter ratios, which architects, sculptors, and book designers have all used in their work to help set the tone for their compositions, and to …
CSS Diner
The Web Platform
Device-Agnostic
Trent Walton on the term Device-Agnostic: Like cars designed to perform in extreme heat or on icy roads, websites should be built to face the reality of the web’s inherent variability. In my mind this approach addresses the following from the beginning: Hostile browsers, Tiny screens, Slow connection speeds, and Touch inputs Long story short, …
Get screenshots of websites in different resolutions with pageres
Animating SVG With Clipping Masks and CSS
Unfortunately, we can’t animate SVG fills the same way [we do with paths] with only CSS. However I’ve thought of way of giving the impression they’re being ‘painted’ by animating SVG clipping masks. Animating SVG With Clipping Masks and CSS → Animating SVG With Clipping Masks and CSS (Demos) → Looking for a way to …
Continue reading “Animating SVG With Clipping Masks and CSS”
Stripe Checkout
Responsive Deliverables: The Style Guide
Jeremy wrote a nice article on Pattern Sharing, sparked by the Code for America Style Guide. A first look at the style guide might tell you it’s just a pattern primer, yet the menu reveals that the style guide also holds a few templates to use. In order to see the code used for the …