http://simonwillison.net/2025-08-05T05:20:18+00:00Simon Willison2025-08-05T05:20:18+00:002025-08-05T05:20:18+00:00https://simonwillison.net/2025/Aug/5/a-friendly-introduction-to-svg/#atom-tag

<p><strong><a href="https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/">A Friendly Introduction to SVG</a></strong></p> This SVG tutorial by Josh Comeau is fantastic. It's filled with neat interactive illustrations - with a pleasing subtly "click" audio effect as you adjust their sliders - and provides a useful introduction to a bunch of well chosen SVG fundamentals.</p> <p>I finally understand what all four numbers in the <code>viewport="..."</code> attribute are for! <p><small></small>Via <a href="https://lobste.rs/s/ome2lo/friendly_introduction_svg">Lobste.rs</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/svg">svg</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/josh-comeau">josh-comeau</a></p>

2024-02-13T19:51:42+00:002024-02-13T19:51:42+00:00https://simonwillison.net/2024/Feb/13/how-to-center-a-div/#atom-tag

<p><strong><a href="https://www.joshwcomeau.com/css/center-a-div/">How To Center a Div</a></strong></p> Josh Comeau: “I think that my best blog posts are accessible to beginners while still having some gold nuggets for more experienced devs, and I think I’ve nailed that here. Even if you have years of CSS experience, I bet you’ll learn something new.”</p> <p>Lots of interactive demos in this. <p><small></small>Via <a href="https://twitter.com/joshwcomeau/status/1757475065992474680">@joshwcomeau</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/css">css</a>, <a href="https://simonwillison.net/tags/josh-comeau">josh-comeau</a></p>

2023-11-21T16:25:55+00:002023-11-21T16:25:55+00:00https://simonwillison.net/2023/Nov/21/an-interactive-guide-to-css-grid/#atom-tag

<p><strong><a href="https://www.joshwcomeau.com/css/interactive-guide-to-grid/">An Interactive Guide to CSS Grid</a></strong></p> Josh Comeau’s extremely clear guide to CSS grid, with interactive examples for all of the core properties. <p><small></small>Via <a href="https://twitter.com/joshwcomeau/status/1726989436758675905">@joshwcomeau</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/css">css</a>, <a href="https://simonwillison.net/tags/josh-comeau">josh-comeau</a></p>

2021-08-09T14:30:48+00:002021-08-09T14:30:48+00:00https://simonwillison.net/2021/Aug/9/css-transforms-tutorial/#atom-tag

<p><strong><a href="https://www.joshwcomeau.com/css/transforms/">The World of CSS Transforms</a></strong></p> Comprehensive, clearly explained tutorial on CSS transforms by Josh W. Comeau, with some very neat interactive demos. I hadn’t understood how useful it is that the translate() transform treats percentages as applying to the dimensions of the element being transformed, not its parent. This means you can use expressions like transform: translateX(calc(100% + 4px)); to shift an element by its entire width plus a few more pixels. <p>Tags: <a href="https://simonwillison.net/tags/css">css</a>, <a href="https://simonwillison.net/tags/josh-comeau">josh-comeau</a></p>