CSS Layout News - Issue 297

Horizontal rules, SVG grids, or build your own web browser
 

CSS Layout News

 

ISSUE 297  6th April 2021

 

News

 

Issue 297

I hope those of you who celebrate (the Western church) Easter, had a good weekend. It's a four day weekend here, although like many freelancers I worked most of the holiday days. I did get to spend Easter Monday working on some content about the new container queries spec for MDN though. Hopefully I'll get that finished this week.

With Easter over I'm looking forward to the upcoming An Event Apart Spring Summit. I miss meeting up with the AEA crew in person so much, but the line-up for the Spring Summit is fantastic and I know everyone has put a lot of time and thought into their presentations. Take a look at the details in the footer of this email, and I hope to see you there.

Rachel Andrew, CSS Layout News

 
 

Learn

 

Not Your Typical Horizontal Rules

This is a lovely article about the humble <hr> element, why you should consider using it, and how to make them look nice while retaining their semantics.

sarasoueidan.com

 

Swipey image grids.

This is a really great article on creating image grids not with CSS Grid, but instead with SVG.

cassie.codes

 

Let’s Create an Image Pop-Out Effect With SVG Clip Path | CSS-Tricks

I'm a big fan of articles that riff of another article or demo, adding value in the process. Here, a demo I linked to previously is used as the jumping off point for an alternative approach.

css-tricks.com

 

Laying Out Pages | Web Browser Engineering

This book project is fascinating. I've linked to the new chapter on layout, as it was published this week and topical for this newsletter. However, I am looking forward to reading the rest of the book and the upcoming chapters.

browser.engineering

 

Sticky Headers: 5 Ways to Make Them Better

A good look into the usability of sticky headers.

Persistent headers can be useful to users if they are unobtrusive, high-contrast, minimally animated, and fit user needs.

nngroup.com

 
 

Our Sponsor

 

Explore the intersection of accessibility, usability, and inclusion

Inclusion and diversity are two of the most important themes in today’s world. As UX and front-end experts, it’s our responsibility to not only be aware of these topics, but to actively explore how our work impacts all users, not just an idealized average.

An Event Apart Online Together: Spring Summit features essential sessions with Derek Featherstone, Senongo Akpem, Sharon Steed, Melanie Richards, and David Dylan Thomas to help you get started. Join us online April 19–21.

CSS Layout subscribers can save $100 off any multi-day pass with promo code: AEACSSL21

See the agenda and sign up today!

aneventapart.com

 
 
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 296

Wednesday, March 31, 2021

Container Queries, CSS Performance, and more interesting things about color. View on the Web Archives ISSUE 296 30th March 2021 News Issue 296 I've still not moved platform for this newsletter yet,

CSS Layout News - Issue 295

Tuesday, March 23, 2021

Fixing compat pain points, color-mix(), blend modes and masking. View on the Web Archives ISSUE 295 23rd March 2021 News Issue 295 Today marks a year since the first lockdown here in the UK, I just had

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

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

Vela Identity, Safari 15, Cars Data, New Responsive, Styled-components

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

The Pandemic-Inspired Design Trends That Are Sure to Stick Around

Tuesday, June 22, 2021

Plus, 40 of the best home decor stores in America (image) Architectural Digest AD PRO Logo Artist studio with easel 4 Pandemic-Inspired Design Trends That Are Sure to Stick Around Read More → Nickey

✏ 20 Best New Fonts, 6 Levels of UX Maturity, State of Windows, and more…

Tuesday, June 22, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU The 6 Levels of UX Maturity NNGROUP.COM COMMENTS Google Top Stories Carousel Now Showing Non-AMP Listings

Smashing Newsletter #306: Front-End Accessibility

Tuesday, June 22, 2021

With accessible toggles, navigation, disabled buttons, hidden content and media scroller component. Applicable to your projects right away. Issue #306 • June 22, 2021 • View in the browser 💨 Smashing

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