CSS Layout News - Issue 295

Fixing compat pain points, color-mix(), blend modes and masking.

CSS Layout News


ISSUE 295  23rd March 2021




Issue 295

Today marks a year since the first lockdown here in the UK, I just had a look back at my intro to the email as we were heading into that lockdown. I am not sure I imagined we would still be here a year later.

However, here we are. Hopefully there is some light at the end of the tunnel, though this virtual life looks set to go on a little longer.

Rachel Andrew, CSS Layout News


Compat2021: Eliminating five top compatibility pain points on the web

Google is partnering with other browser vendors and industry partners to fix the top five browser compatibility pain points for web developers: CSS Flexbox, CSS Grid, position: sticky, aspect-ratio, and CSS transforms.



color-mix() - CSS: Cascading Style Sheets | MDN

The color-mix() function is in Firefox Nightly and Safari TP. It's one of a whole bunch of interesting things that are part of CSS Color Level 4 and 5. I'm working through documenting them for MDN.





Accessible Text Labels For All

How to create more descriptive button or link text labels to improve the e-commerce experience for screen readers users.



Building a Settings component

A fast-paced look at building a Settings component with a lot of CSS Grid. There is a video version too.



Image Fragmentation Effect With CSS Masks and Custom Properties | CSS-Tricks

This is a nice effect and also demonstrates a good use case for @property.



Taming Blend Modes: `difference` and `exclusion` | CSS-Tricks

A really detailed dive into blend modes from Ana Tudor.





Transition.css - easy transitions with clip-path

Some nice little transitions to copy and paste or just to poke at to see how they work.


You received this email because you subscribed via the CSS Layout News site.
We'll be sorry to see you go but you can unsubscribe instantly.
Spike Island 133 Cumberland Rd Bristol BS1 6UX

©2021 CSS Layout News | Privacy Policy | Curated by Rachel Andrew.
Published with Curated

Older messages

CSS Layout News - Issue 294

Tuesday, March 16, 2021

Layout shifts, HSL, content re-ordering with grid, and Safari TP updates. View on the Web Archives ISSUE 294 16th March 2021 News Issue 294 I've been busy finishing off and recording my talk for

CSS Layout News - Issue 293

Tuesday, March 9, 2021

@property, Houdini Paint API, more scroll-linked animations, and indicating the current page. View on the Web Archives ISSUE 293 9th March 2021 News Issue 293 I'm in the middle of creating new

CSS Layout News - Issue 292

Tuesday, March 2, 2021

Grid fixes for Safari, Flex tools in Chrome, hiding content, and accessibility. View on the Web Archives ISSUE 292 2nd March 2021 News Issue 292 Welcome to another issue of CSS "is it really

CSS Layout News - Issue 291

Tuesday, February 23, 2021

Images, shadows, tabs, and Intersection Observer. View on the Web Archives ISSUE 291 23rd February 2021 News Issue 291 I didn't get time to move this list to the new platform last week. I had my

CSS Layout News - Issue 290

Tuesday, February 16, 2021

All about the floats, plus multicol, and container queries news. View on the Web Archives ISSUE 290 16th February 2021 News Issue 290 I am currently working on moving this newsletter to a new platform.

Now Hiring: Designer at DMA (and More!)

Thursday, June 24, 2021

Visit our job board to view more opportunities. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🤯 Impressive Mobile UI Kits and more

Thursday, June 24, 2021

Fresh UpLabs Freebies? Yes Please 😉 Take a look at some fresh high-quality Freebies that have been handpicked for you by the UpLabs team this week. Only $9.99 for UpLabs Premium! Seize the opportunity,

✏ Splash Page Vs Landing Page, Frontend Toolbox, 10 JavaScript Keyboards, and more...

Thursday, June 24, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU Frontend Toolbox - A List of Handpicked Resources for Frontend Developers AKSHAY.ROCKS COMMENTS Splash Page Vs Landing

Grandma's Vases Are Causing a Buzz

Thursday, June 24, 2021

Plus, 15 interiors every design lover must see in person (image) Architectural Digest AD PRO Logo For Clients Enjoying the High Life, These Antiques Turned Cannabis Accessories Could Be a Big Hit Read

✏ Issue #492: Best New Fonts, What to Expect from Windows 11, Brave Search, 6 Levels of UX Maturity, and more…

Thursday, June 24, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #492 JUNE 24, 2021 20 Best New Fonts, June 2021 Welcome to the first in a new series of posts in which we take a look at the best new fonts

Universal Pictures, Surviving IDEO, Assassin’s Creed, Tipping Experience, Aspect-ratio

Thursday, June 24, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 24 2021 Universal Pictures Brand Identity Refinement

The Biggest Paint Trend News of 2021 (So Far)

Wednesday, June 23, 2021

Plus, 17 boldly beautiful dining room ideas from the pages of AD (image) Architectural Digest AD PRO Logo wooden drinks cabinet With Its IPO, Will 1stDibs Become the eBay of Luxury Design? Read More →

✏ How Performance Affects SEO, RWD in a Component World, Coded Illustrations, and more…

Wednesday, June 23, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU How your Website Performance Affects your SEO Rankings BOOTSTRAPBAY.COM COMMENTS Soft UI: Making Sense of the Latest

NYC Votes, Coded Illustrations, Motion & Accessibility, Custom Scrollbars, UCD

Wednesday, June 23, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 23 2021 Vela: Identity Design Process mattyow.medium.com

Issue 308

Wednesday, June 23, 2021

Information as more of the new rendering engine for Chromium lands. Explaining interesting CSS Grid examples, CSS masking, and serving sharp images. CSS Layout News Issue 308 By Rachel Andrew – 23 Jun