CSS Layout News - Issue 291

Images, shadows, tabs, and Intersection Observer.
 

CSS Layout News

 

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 final Smashing Layout workshop to do, which consumed a bunch of time. Moving a large email list always seems somewhat perilous, one false move and you send TEST to 11,000 people. Hopefully I'll get it sorted this week.

Speaking of workshops, I'm planning some new ones. I have a bunch of ideas, but would love to know if there are things you would love to see me workshop. What would be most helpful for you to learn? What would your boss like you to learn? Drop me a line and let me know.

Rachel Andrew, CSS Layout News

 

Firefox 86 for developers - Mozilla | MDN

Firefox 86 lands today, only a couple of little CSS changes this time. With list-style-image accepting any valid image type in Firefox, you can now use a gradient for a bullet in all browsers. I'm not 100% sure why you would want to, but it's always nice to have options.

mozilla.org

 
 

Learn

 

Getting Deep into Shadows | CSS-Tricks

This is nice because it explains how and why to use shadows, not just technically how to add a shadow.

css-tricks.com

 

Building a ‘Table Of Contents’ with active indicator using JavaScript Intersection Observers – Ben Frain

A post explaining how to use Intersection Observer for this task. I like the fact it references the way we used to do things. How often do we reach for a technique because we've done it a million times before, without checking to see if the web moved on a bit?

benfrain.com

 

Maximally optimizing image loading for the web in 2021

Some excellent tips here, plus I like the progress indicator at the top of the page!

industrialempathy.com

 

Barebones CSS for Fluid Images—zachleat.com

What is the best way to make an image fluid?

zachleat.com

 

Building a Tabs component

A guide to building a tabbed component, there is also a video version of this tutorial if you prefer.

web.dev

 
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 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.

CSS Layout News - Issue 289

Tuesday, February 9, 2021

Platform News, clamp(), masking, accessibility, and faking container queries. View on the Web Archives ISSUE 289 9th February 2021 News Issue 289 I've been at a CSS WG virtual face-to-face meeting

CSS Layout News - Issue 288

Tuesday, February 2, 2021

Flexbox features in Chrome DevTools, aspect-ratio, avoiding font-loading layout shifts View on the Web Archives ISSUE 288 2nd February 2021 News Issue 288 While it has been almost a year since I got on

CSS Layout News - Issue 287

Tuesday, January 26, 2021

Open Web Docs, Firefox 85, scroll margin, simple HTML View on the Web Archives ISSUE 287 26th January 2021 News Issue 287 Some interesting bits of news this week, with Open Web Docs launching and :

CSS Layout News - Issue 286

Tuesday, January 19, 2021

Chrome 88, Responsible Web Applications, screen reader testing View on the Web Archives ISSUE 286 19th January 2021 News Issue 286 I'm currently spending my time documenting things over at MDN. The

Hollywood Regency Meets the Upper East Side in Manolo Blahnik's New Manhattan Flagship

Monday, June 21, 2021

Plus, 7 ways to save a project before things start to go wrong (image) Architectural Digest AD PRO Logo Image may contain: Grass, Plant, and Lawn Move Over, Marie Antoinette—These Giant Animal

✏ What’s Coming in WordPress 5.8, Free Developer Stuff, 12 CSS Parallax Effects, and more...

Monday, June 21, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU What's Coming in WordPress 5.8 (Features and Screenshots) WPBEGINNER.COM COMMENTS How to Use Dynamic Imports in

🖥 Sleek Landing Page Designs + 🏆 Challenge Updates

Monday, June 21, 2021

The Designer Digest Is Floating Your Way 🎈 To begin, we'd like to congratulate Faiz Abiyandani, the winner of our latest 🏃‍♀️Fitness App Challenge! Next, don't forget that the second week to

Camping Out in a 3,000-Square-Foot Loft

Monday, June 21, 2021

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman The living room. Photo: Annie Schlechter

Accessibility Weekly #245: When CSS Isn’t Enough

Monday, June 21, 2021

Sponsored by Automattic. They're hiring. June 21, 2021 • Issue #245 View this issue online or browse the full issue archive. Featured: When CSS isn't enough: JavaScript requirements for

Voice UI, Sharp Images, Philip K. Dick, Windows Layers, CSS Paint API

Monday, June 21, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 21 2021 An Alternative Voice UI To Voice Assistants

✏ How to Avoid SEO Disaster, 6 Types of Web Design, Simply Markdown, and more...

Sunday, June 20, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU An Alternative Voice UI to Voice Assistants SMASHINGMAGAZINE.COM COMMENTS Simply Markdown - Easy Create Markdown with

✏ Is AMP Dead and Do We Care? React Markdown Editor, Bad vs Good Designs, and more...

Saturday, June 19, 2021

Poll: Is AMP Dead, and do We Care? WEBDESIGNERDEPOT.COM COMMENTS Bad Vs Good Accessible Designs USABILITYGEEK.COM COMMENTS Client-Side Routing in Next.js SMASHINGMAGAZINE.COM COMMENTS React Markdown

The 25 Best Accent Chairs, According to AD100 Designers

Friday, June 18, 2021

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our new weekly roundup of the best designs to source

✏ 40 Javascript Memes, CSS Specificity Calculator, HTML Semantic Tags Sheet, and more...

Friday, June 18, 2021

The Problem with UX/UI Portfolios MARKBOULTON.CO.UK COMMENTS CSS Specificity Calculator POLYPANE.APP COMMENTS Your Image is Probably not Decorative SMASHINGMAGAZINE.COM COMMENTS Top 40+ Javascript