--- title: "Solving aspect-ratio trickiness" publication: "Frontend Focus" issue: 479 published_at: "2021-02-24" canonical_url: "https://frontendfoc.us/issues/479" --- ... plus exploring stacking contexts for z-index. | Frontend![](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)Focus #479 — February 24, 2021 | [Read on the web](https://frontendfoc.us/issues/479) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1614176159/ws3tbg8scrrk59tqtxec.png)](https://www.smashingmagazine.com/2021/02/responsive-image-effects-css-gradients-aspect-ratio/) [Create Responsive Image Effects with CSS Gradients and `aspect-ratio`](https://www.smashingmagazine.com/2021/02/responsive-image-effects-css-gradients-aspect-ratio/) — A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported `aspect-ratio` property in combination with `object-fit` provides a remedy to this headache of the past. Stephanie Eckles [What The Heck, `z-index`?](https://www.joshwcomeau.com/css/stacking-contexts/) — Another great post from Josh, this time exploring stacking contexts and the often tricky `z-index` property. Josh W Comeau [![\](https://copm.s3.amazonaws.com/195bc6eb.jpg)](https://launchdarkly.com/the-definitive-guide-to-feature-management/?utm_source=cooperpress&utm_medium=display&utm_campaign=21q1-cooperpress) [The Definitive Guide to Feature Management](https://launchdarkly.com/the-definitive-guide-to-feature-management/?utm_source=cooperpress&utm_medium=display&utm_campaign=21q1-cooperpress) — Feature management is a new class of software development tools/techniques powered by feature flags. A feature management platform like LaunchDarkly fills the gaps of conventional feature toggles. Learn the ins & outs of feature management today. LaunchDarkly sponsor [Firefox 86 Introduces 'Total Cookie Protection'](https://blog.mozilla.org/security/2021/02/23/total-cookie-protection/) — The goal of ‘total cookie protection’ is to confine cookies solely to the site where they were created, rather than letting tracking companies use them to track your activity across the Web. It essentially gives you a separate ‘cookie jar’ per site. Firefox 86 also adds [multiple picture-in-picture support.](https://blog.mozilla.org/blog/2021/02/23/latest-firefox-release-includes-multiple-picture-in-picture-and-total-cookie-protection/) Mozilla Security Blog **⚡️ Quick bits:** - [This page brings details on a collection of 'controversial' Web APIs together](https://webapicontroversy.com/) — highlighting where major browser vendors are struggling to find consensus on their design or even their security and privacy implications. - Silvestar Bistrović has [ran a CSS audit](https://css-auditors.com/blog/the-very-first-css-report-about-css-file-sizes-and-file-count/) of the sites of top British soccer clubs, comparing file sizes and counts. [Here are the results](https://css-auditors.com/reports/premier-league-2021-02/). - The 2021 '[State of Software Development](https://bit.ly/36V3WLR)' survey is now live and seeking responses — it covers hiring, managing software development, tech stacks, performance, and more. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1614177424/fbdy7i0spyvaiuczp8nf.png)](https://css-tricks.com/getting-deep-into-shadows/) [Getting Deep into Shadows](https://css-tricks.com/getting-deep-into-shadows/) — Turns out there’s a lot to cover when it comes to all the ways in which you can use shadows in web design. This post explores them. Rob O'Leary [Time for Next-Gen Codecs to Dethrone JPEG](https://cloudinary.com/blog/time_for_next_gen_codecs_to_dethrone_jpeg) — A look at how several next-gen image codecs (_JPEG 2000, WebP, AVIF, and JPEG XL_) compare to JPEG in compression density, features, etc. Jon Sneyers [Learn How Publicis Sapient use GatherContent to Massively Speed Up Site Builds](https://hubs.la/H0F6wkJ0) — Learn how they used GatherContent to achieve this and start your free 30-day trial to get your own POC live in an hour. GatherContent sponsor [How to Publish an Angular, React, Svelte, or Vue JavaScript app with Azure Static Web Apps](https://docs.microsoft.com/en-us/learn/modules/publish-app-service-static-web-app-api/) — A multi-step tutorial on deploying a modern JavaScript app to [Azure Static Web Apps](https://azure.microsoft.com/en-gb/pricing/details/app-service/static/), Azure’s platform for building and deploying static apps from a GitHub repository. John Papa (Microsoft) [Three Ways to 'Blob' with CSS and SVG](https://css-tricks.com/three-ways-to-blob-with-css-and-svg/) — Making smooth, random, jelly-like shapes to illustration elements, background effects, etc. Akash Mittal [Creating a Shrinking Header on Scroll _without_ JavaScript](https://css-tricks.com/how-to-create-a-shrinking-header-on-scroll-without-javascript/) Håvard Brynjulfsen [How Web Components Are Used at GitHub and Salesforce](https://thenewstack.io/how-web-components-are-used-at-github-and-salesforce/) Richard MacManus [A Barebones CSS Approach for Fluid Images](https://www.zachleat.com/web/fluid-images/) Zach Leatherman [Styling Scrollbars with CSS](https://daily-dev-tips.com/posts/styling-scrollbars-with-css/) Chris Bongers 💻 **Jobs** [Technology Lead (Calgary, Canada)](https://www.criticalmass.com/jobs/detail/technology-lead-calgary-2449712) — We’re a digital experience design agency seeking a senior tech lead. Help us deliver on fast paced, creative campaigns with your knowledge of HTML, CSS, jQuery and JavaScript, building accessible, scalable, and performant web apps. Critical Mass [Front End Developer (Calgary, Canada)](https://www.criticalmass.com/jobs/detail/developer-calgary-2448990) — We’re seeking an experienced frontend dev to join our design agency. Use your jQuery, HTML and CSS skills to help us develop cutting-edge responsive websites. Critical Mass [Find Your Next Job Through Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 🧑‍💻 _Looking to share your job listing in Frontend Focus? [There's more info here](https://booking.cooperpress.com/jobs)_. 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1614174886/jkhyitocdejw6lywcoau.png)](https://github.com/rgab1508/PixelCraft) [PixelCraft: A Pixel Art Editor](https://github.com/rgab1508/PixelCraft) — Tool installable as a PWA with offline use to build pixelated graphics and GIF animations (maybe useful for retro graphics). You can [try it here](https://pixelcraft.web.app/). Gabriel [SVG Waves: Instantly Generate and Customize Wave Shapes](https://www.svgwaves.io/) — Similar to [another tool](https://getwaves.io/) we recently featured, this one allows you to add draggable nodes to modify the shape of the waves before grabbing the SVG or CSS. Bereket Semagn [fullPage.js: Create Fullscreen Scrolling Sites](https://alvarotrigo.com/fullPage/) — Available in Vue, React, and Angular flavors too. (GPL 3.0 licensed.) [GitHub repo.](https://github.com/alvarotrigo/fullPage.js) Álvaro Trigo [How 4 Figma Features Transformed Stream’s Design Workflows](https://getstream.io/blog/4-ways-figma-has-transformed-and-improved-streams-design-team/?utm_medium=promoted_newsletter&utm_source=frontend_focus) Stream sponsor [disableautofill.js: Disable Form Auto-Fill and Auto-Complete Functions](https://github.com/terrylinooo/disableautofill.js) — You need to be _very_ careful about where you use things like this due to its effect on assistive tools. Terry Lin [![\](https://res.cloudinary.com/cpress/image/upload/v1614178645/plhxgyrkgbhv5aaolc6e.png)](https://glassmorphism.com/) [Glassmorphism: Generate CSS for a "Frosted Glass" Effect](https://glassmorphism.com/) — An online code generator to build a ‘frosted glass’ look for page elements. The CSS combines RGBA transparency with shadows and backdrop-filter, a relatively new CSS property. Albert Walicki [Vue3 Icon Picker: An Beautiful Icon Picker Component for Vue](https://github.com/hasinhayder/vue3-icon-picker) — [Try a demo here](https://hasinhayder.github.io/vue3-icon-picker/). The example is using Font Awesome and this is ported from a [Vanilla JS version](https://github.com/sh-sabbir/aesthetic-icon-picker/). Hasin Hayder 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)