SPW 148: Applying CSS Transforms to background images, the results of the State of HTML 2023 survey, and more!

This week: Applying CSS Transforms to background images, the results of the State of HTML 2023 survey, and more! ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ SitePoint's weekly guide to the world of web dev and design. [View this email in your browser](~/AAAHUQA~/RgRoLefHP0TbaHR0cHM6Ly9iZXJyaW1hLmVvY2FtcGFpZ24xLmNvbS93ZWItdmVyc2lvbj9lcD0yJmxjPTg3MDdlZTg2LTUyZjAtMTFlZS1hZjUyLTRiNTM4MmJhM2I5NCZwPWIzMjNkYmZhLTExMGYtMTFlZi1hZGIzLWM5YzgxMGJkNDMyMSZwdD1jYW1wYWlnbiZ0PTE3MTYyMTY1MTkmcz01ODM1MzQxMjdhNDM5NDFmYjc5NmYwMGUzN2Q4Yjk3ZGQ4MTA1OWY0ZDU3ZWJjZDA5NjJjOTM3YjUxYzRjZTEyVwVzcGNldUIKZkbHYktmAl14y1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd) [Example logo] Issue #148• May 2024 [Accelerate your produce development process](~/AAAHUQA~/RgRoLefHP0UgYWQwNGM4MDQzZTFkMGNkMTg4MmUxZmNhNmY0ZDQ0MmNEgmh0dHBzOi8vc3J2LmJ1eXNlbGxhZHMuY29tL2Fkcy9sb25nL3gvVDY2R05HWkNUVFRUVFRENTNUQk5LVFRUVFRUUTc3UVdLWVRUVFRUVFBUQUlCN0VUVFRUVFQyTFZDSkNDS1JKWTUzVjZFTlBFMks3NllBTEVaSFk2QzJESlZKQ1RXBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~) [Get products over the finish line (much) faster](~/AAAHUQA~/RgRoLefHP0UgMjk3NWIwMjZhZWNlMzcxZGM2YmJjZTRjYWYxN2M1YWVEmGh0dHBzOi8vbWwuc2l0ZXBvaW50LmNvbS9saW5rL2MvWVQweU16RXhOemMyTmprMk5UZzFOREkyT1RrMkptTTlhVEp5TUNabFBUQW1ZajB4TWpFeE5qUXdOVGs1Sm1ROVpqWnJOM1V6YWc9PS5RcndWOWk0QWI0a0RRVndLRnU4Sk1QUnFQVUNPZk50blNGREwtMXBNQU1vVwVzcGNldUIKZkbHYktmAl14y1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd) Taking a product over the finish line sometimes feels like pulling teeth—ouch! monday dev empowers teams to move from ideation to product delivery faster and on a single platform. [Try it out for free!](~/AAAHUQA~/RgRoLefHP0UgYWQwNGM4MDQzZTFkMGNkMTg4MmUxZmNhNmY0ZDQ0MmNEgmh0dHBzOi8vc3J2LmJ1eXNlbGxhZHMuY29tL2Fkcy9sb25nL3gvVDY2R05HWkNUVFRUVFRENTNUQk5LVFRUVFRUUTc3UVdLWVRUVFRUVFBUQUlCN0VUVFRUVFQyTFZDSkNDS1JKWTUzVjZFTlBFMks3NllBTEVaSFk2QzJESlZKQ1RXBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~) This week: Applying CSS Transforms to background images, the results of the State of HTML 2023 survey, and more! Craig Buckler ~/AAAHUQA~/RgRoLefHP0UgYzMwZTdiODQ0MTgwNDhmZDU1NWY2YTYyYjQxOTdlZDJEQWh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vbXVsdGltb2RhbC1jaGF0Z3B0LXZvaWNlLXZpc2lvbi1pbWFnZXMvVwVzcGNldUIKZkbHYktmAl14y1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd~/AAAHUQA~/RgRoLefHP0UgODE4NDI0YWE0NTgyMmUyNjVmYWYwNDljZGVkNTliNThEOmh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vbGFuZ2NoYWluLXB5dGhvbi1jb21wbGV0ZS1ndWlkZS9XBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~~/AAAHUQA~/RgRoLefHP0UgYzBlNGFlMTdkMzE0NDA2OGQ1ZWYxNTI1MWUwYjAyNjBENmh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vcmVhY3Qtcm91dGVyLWNvbXBsZXRlLWd1aWRlL1cFc3BjZXVCCmZGx2JLZgJdeMtSG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~[How to Apply CSS3 Transforms to Background Images](~/AAAHUQA~/RgRoLefHP0UgNzRmZDRiYzZhMGZkZjVlYjQ0MWNkZTNiYTE5Y2JkNzlEOmh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vY3NzMy10cmFuc2Zvcm0tYmFja2dyb3VuZC1pbWFnZS9XBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~) CSS transformations are great, but they don’t (yet?) apply to background images. This article presents a workaround for those times when you really do want to rotate a background image, or to keep a background image fixed while its container element is rotated. [Read now](~/AAAHUQA~/RgRoLefHP0UgNzRmZDRiYzZhMGZkZjVlYjQ0MWNkZTNiYTE5Y2JkNzlEOmh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vY3NzMy10cmFuc2Zvcm0tYmFja2dyb3VuZC1pbWFnZS9XBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~) 🗞️ FROM AROUND THE WEB [The Classic Border Radius Advice, Plus an Unusual Trick](~/AAAHUQA~/RgRoLefHP0UgNDNiYTgzOThmODE0OGY0ZWNlNDY1ODdiZWViY2VjNjFEWGh0dHBzOi8vZnJvbnRlbmRtYXN0ZXJzLmNvbS9ibG9nL3RoZS1jbGFzc2ljLWJvcmRlci1yYWRpdXMtYWR2aWNlLXBsdXMtYW4tdW51c3VhbC10cmljay9XBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~) Chris shares some sage advice about the awkward look of nested elements that both have the same border-radius, a novel (but not cross-browser ready) trick to solve it, and more thoughts on the issue. Chris Coyier [Results of The State of HTML 2023 survey](~/AAAHUQA~/RgRoLefHP0UgY2M2N2VjM2YwMTVmNjNmMzllZDA4ZGU4NDdiNWYwODhEImh0dHBzOi8vMjAyMy5zdGF0ZW9maHRtbC5jb20vZW4tVVNXBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~) A while ago, we share a link to fill out the inaugural State of HTML survey. Well, the results are finally out! Enjoy insights from 22K responses about the state of the web platform, from HTML and interactivity to webcomponents, PWAs, and a lot more. HTML 2023 🍅 FRESH SITEPOINT CONTENT [View all](~/AAAHUQA~/RgRoLefHP0UgMTI1ZGJmYmUyMjNmMjk4MDg5YjA5OGY4M2FmMTIzMGJEH2h0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vYmxvZy9XBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~) ~/AAAHUQA~/RgRoLefHP0UgNTc1NWE5MTI1YWU5ODM5YWZhYjI0MjVlNWE1MWU4NzBEzGh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vb3BlbmFpLWFwaS1weXRob24tZGF0YS1hbmFseXNpcy8_dXRtX3NvdXJjZT1uZXdzbGV0dGVyJnV0bV9tZWRpdW09ZW1haWwmdXRtX2NhbXBhaWduPXNwd18xMTRfZGF0YV9hbmFseXNpc193aXRoX3RoZV9vcGVuYWlfYXBpX2FuX2ludHJvX3RvX25ldF9ibGF6b3JfYW5kX21vcmUmdXRtX3Rlcm09MjAyMy0wOS0xNFcFc3BjZXVCCmZGx2JLZgJdeMtSG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~~/AAAHUQA~/RgRoLefHP0UgZTZjYzY2NGUzMjE2NjQzZDU2ODRkNTIzNDZmOGNkZmREVGh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vYW4taW50cm9kdWN0aW9uLXRvLWxhbmdjaGFpbi1haS1wb3dlcmVkLWxhbmd1YWdlLW1vZGVsaW5nL1cFc3BjZXVCCmZGx2JLZgJdeMtSG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~~/AAAHUQA~/RgRoLefHP0UgNWIzYWI5Y2RmYTU1YmRkZDQ2YmNkMTQ5ODVmOTAwNGRENmh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vcmVtb3ZlLWJhY2tncm91bmQtcGhvdG9zaG9wL1cFc3BjZXVCCmZGx2JLZgJdeMtSG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~~/AAAHUQA~/RgRoLefHP0UgNWIxYjNiMTExMDMxYjAxYjhkMWRjYjg3ZGQ4Zjk2Y2NEMWh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vbm9kZS1qcy1tdWx0aXRocmVhZGluZy9XBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~[Cloud Native: How Ampere Is Improving Nightly Arm64 Builds](~/AAAHUQA~/RgRoLefHP0UgN2I5NTI1MDlmOGQxNDg1YzRmYzgxNzU4NWQ1NzkzODJEVGh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vY2xvdWQtbmF0aXZlLWhvdy1hbXBlcmUtaXMtaW1wcm92aW5nLW5pZ2h0bHktYXJtNjQtYnVpbGRzL1cFc3BjZXVCCmZGx2JLZgJdeMtSG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~) Just before KubeCon NA 2023, in Chicago, the CNCF announced a new project to help CNCF projects create arm64/ Ampere runners to make their nightly native arm64 builds more secure, more efficiently use resources, and be much faster. Dave Neary & Aaron Williams ~/AAAHUQA~/RgRoLefHP0UgNTc1NWE5MTI1YWU5ODM5YWZhYjI0MjVlNWE1MWU4NzBEzGh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vb3BlbmFpLWFwaS1weXRob24tZGF0YS1hbmFseXNpcy8_dXRtX3NvdXJjZT1uZXdzbGV0dGVyJnV0bV9tZWRpdW09ZW1haWwmdXRtX2NhbXBhaWduPXNwd18xMTRfZGF0YV9hbmFseXNpc193aXRoX3RoZV9vcGVuYWlfYXBpX2FuX2ludHJvX3RvX25ldF9ibGF6b3JfYW5kX21vcmUmdXRtX3Rlcm09MjAyMy0wOS0xNFcFc3BjZXVCCmZGx2JLZgJdeMtSG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~~/AAAHUQA~/RgRoLefHP0UgZTZjYzY2NGUzMjE2NjQzZDU2ODRkNTIzNDZmOGNkZmREVGh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vYW4taW50cm9kdWN0aW9uLXRvLWxhbmdjaGFpbi1haS1wb3dlcmVkLWxhbmd1YWdlLW1vZGVsaW5nL1cFc3BjZXVCCmZGx2JLZgJdeMtSG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~~/AAAHUQA~/RgRoLefHP0UgNWIzYWI5Y2RmYTU1YmRkZDQ2YmNkMTQ5ODVmOTAwNGRENmh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vcmVtb3ZlLWJhY2tncm91bmQtcGhvdG9zaG9wL1cFc3BjZXVCCmZGx2JLZgJdeMtSG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~~/AAAHUQA~/RgRoLefHP0UgNWIxYjNiMTExMDMxYjAxYjhkMWRjYjg3ZGQ4Zjk2Y2NEMWh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vbm9kZS1qcy1tdWx0aXRocmVhZGluZy9XBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~[Creating Fluid Typography with the CSS clamp() Function](~/AAAHUQA~/RgRoLefHP0UgYmFiZGE3ZDg5NDQzNjgyNzgyMTkyMmY4YzJhOTQxMWZEPmh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vZmx1aWQtdHlwb2dyYXBoeS1jc3MtY2xhbXAtZnVuY3Rpb24vVwVzcGNldUIKZkbHYktmAl14y1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd) In this article, we’ll dig into how to use the CSS clamp() function to scale the size of text across a range of device sizes. Daine Mawer 📚 FROM THE TOP SHELF [Browse all](~/AAAHUQA~/RgRoLefHP0UgYmYyMGRhYzc2ZGE1ZDUzZDY5ZTQ2NzVhYWEwMDIyMjdEKmh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vcHJlbWl1bS9saWJyYXJ5L1cFc3BjZXVCCmZGx2JLZgJdeMtSG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~) [Unleashing the Power of Astro](~/AAAHUQA~/RgRoLefHP0UgMTAwNzEzZWRhNTRjYjcyMmExYmNmZDE5MWViMGZiN2RERmh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vcHJlbWl1bS9ib29rcy91bmxlYXNoaW5nLXRoZS1wb3dlci1vZi1hc3Ryby9XBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~) [Node.js: Novice to Ninja](~/AAAHUQA~/RgRoLefHP0UgM2NiZTg0NTkwNWMyMjg5YWQ2ZmFlM2Q2MDRmMjIyYTNEQGh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vcHJlbWl1bS9ib29rcy9ub2RlLWpzLW5vdmljZS10by1uaW5qYS9XBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~) [Beginning ReactJS Foundations](~/AAAHUQA~/RgRoLefHP0UgNDU3ZmIzMzBhNzczMDg1ZDMwYTc4NDU0MTA3ZmQ0MjZEgmh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vcHJlbWl1bS9ib29rcy9iZWdpbm5pbmctcmVhY3Rqcy1mb3VuZGF0aW9ucy1idWlsZGluZy11c2VyLWludGVyZmFjZXMtd2l0aC1yZWFjdGpzLWFuLWFwcHJvYWNoYWJsZS1ndWlkZS9XBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~) 📚 HAVE YOU MET OUR COMMUNITY YET? [Say hi](~/AAAHUQA~/RgRoLefHP0UgMWZkYzljMjVlZThkZDc2YTMyMGU2NmM5OTViOGY4MThEJGh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vY29tbXVuaXR5L1cFc3BjZXVCCmZGx2JLZgJdeMtSG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~) SitePoint's community is a place where you can come to talk tech, development, and design. ~/AAAHUQA~/RgRoLefHP0UgM2Q1NDM2YTAzYzViNjdiOWQxN2MwMjkwMWY5YmYxMTVEI2h0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vY29tbXVuaXR5VwVzcGNldUIKZkbHYktmAl14y1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd [Join us today](~/AAAHUQA~/RgRoLefHP0UgM2Q1NDM2YTAzYzViNjdiOWQxN2MwMjkwMWY5YmYxMTVEI2h0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vY29tbXVuaXR5VwVzcGNldUIKZkbHYktmAl14y1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd) and get involved with other members who share your interests in tech! Is this content relevant to you? [Help us shape this newsletter by filling out our survey](~/AAAHUQA~/RgRoLefHP0UgNzA2OTM5YzJmNDJjYThmMmFjZjk2NTdlYmFlZWFiMjREJWh0dHBzOi8vZm9ybS50eXBlZm9ybS5jb20vdG8vV255SDQxeDdXBXNwY2V1QgpmRsdiS2YCXXjLUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~). Happy learning! Dianne Pena Editor You received this email because you subscribed to our list. You can [unsubscribe](~/AAAHUQA~/RgRoLefHP4QWAWh0dHBzOi8vYmVycmltYS5lb2NhbXBhaWduMS5jb20vdW5zdWJzY3JpYmU_ZXA9MiZsPWNhYTY1ODU4LTRhYzYtMTFlZS04MDE2LTRkY2U5YmEwOGU2ZCZsYz04NzA3ZWU4Ni01MmYwLTExZWUtYWY1Mi00YjUzODJiYTNiOTQmcD1iMzIzZGJmYS0xMTBmLTExZWYtYWRiMy1jOWM4MTBiZDQzMjEmcHQ9Y2FtcGFpZ24mcHY9NCZzcGE9MTcxNjIxMzY2MCZ0PTE3MTYyMTY1MTkmcz03NGM0MDZhZDQ0MGRmZGQyZGZhMzExODJlMWY3OTQ0YzUzNjBmN2FkYjE2NDNhY2Y0Y2RmMGMzNmQ5ZjQ1NDYwVwVzcGNldUIKZkbHYktmAl14y1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd) at any time. 71 Balmain Street Cremorne Vic 3121 Australia [Powered by EmailOctopus](~/AAAHUQA~/RgRoLefHP0TSaHR0cHM6Ly9iZXJyaW1hLmVvY2FtcGFpZ24xLmNvbS9yZXdhcmRzP2xjPTg3MDdlZTg2LTUyZjAtMTFlZS1hZjUyLTRiNTM4MmJhM2I5NCZwPWIzMjNkYmZhLTExMGYtMTFlZi1hZGIzLWM5YzgxMGJkNDMyMSZwdD1jYW1wYWlnbiZ0PTE3MTYyMTY1MTkmcz1iM2JhZTk2MDQ0ZDZiMzk5YmI2NjgwMzlhZDEzN2ViMTU2ZjY0YmJkOTMxMDdhZDZmYjJjNTg1ZWI2YjE5MDQwVwVzcGNldUIKZkbHYktmAl14y1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd)