CSS Layout News - CSS Layout News - Issue 295

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

CSS Layout News

 

ISSUE 295  23rd March 2021

 

News

 

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.

web.dev

 

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.

mozilla.org

 
 

Learn

 

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.

sarasoueidan.com

 

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.

web.dev

 

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.

css-tricks.com

 

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

A really detailed dive into blend modes from Ana Tudor.

css-tricks.com

 
 

Interesting

 

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.

transition.style

 
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.

You Might Also Like

At Home With Gloria Steinem

Thursday, December 26, 2024

View in your browser | Update your preferences ADPro Glory, Gloria Every year our AD100 honorees fill out a survey of projects that they're working on. A year or so ago, longtime AD100 designer

Celeb Homes at the Holidays—and a Few More Things to Make You Merry

Tuesday, December 24, 2024

View in your browser | Update your preferences ADPro Holiday Cheer Whether your taste leans traditional, modern, or all-out extravagant, AD is rife with inspiration for your holiday. In the spirit of

#488: Fun And Useful Gems

Tuesday, December 24, 2024

Radio garden, Zoom backgrounds, visual history of the alphabet and fun interactive experiences. Issue #488 • Dec 24, 2024 • View in the browser Smashing Newsletter Hello Smashing Friends, As we are

Accessibility Weekly #428: Putting AI to the (Accessibility) Test

Monday, December 23, 2024

December 23, 2024 • Issue #428 View this issue online or browse the full issue archive. Hey accessibility friends! It's the time of year where news and information slows down as many people take

2024 magic moments

Sunday, December 22, 2024

Issue 225: The year from my personal lens ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Planning mode

Friday, December 20, 2024

Lessons from our first-ever annual planning sprint ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

We Co-Sign This AD100-Approved Trend

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Emboldening the Bath Marble, marble, everywhere, and every drop is chic. According to AD100 designer Jake Arnold, “material drenching”—that is,

177 / Keep calm by listening to these ambient sounds

Thursday, December 19, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Dec 2024 • Part 1 View in browser Welcome to Issue 177 Lately, I've been driving a lot of inspiration from the things I see in real life. The range

The Year in Color: Hella Jongerius, Mocha Mousse, and More

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Color Our World Since the summer, AD PRO has kept its finger on the pulse of color predictions. Overall, the vibe right now is down to earth,

🐺Get Media Features in 2025

Thursday, December 19, 2024

A BIG Wolf Craft announcement!! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏