Web Design: Advanced Effects with CSS Background Blend Modes

Wednesday, August 22, 2018

Advanced Effects with CSS Background Blend Modes

#354 — August 22, 2018

UX and HTML5: Let's Help Users Fill In Your Mobile Forms — Best practices to improve your mobile forms, including scannability and readability. There's a lot to chew on here.

Stéphanie Walter

Advanced Effects with CSS Background Blend Modes — Learn about the background-blend-mode, mix-blend-mode and isolation properties and how they can be used to create eye-catching backgrounds and effects.

Bennett Feely

Online Project Management Tool; Boost Your Team's Productivity — monday.com is a project management tool which is the next generation of visual tools, built specifically for developers. It's designed to work with ease, and allows you to see what everyone on your team is working on in a single glance.

monday.com sponsor

Web Performance Made Easy: Google I/O 2018 Edition — An epic roundup of the Web performance tools, libraries and optimization techniques (including predictive loading of assets) that Google presented at their I/O 2018 event.

Google Developers

Prism: An Extensible, Dynamic Syntax Highlighter — It's not new, but we haven't linked it before and it's used by a lot of major sites for syntax highlighting of code examples. GitHub repo.

Verou, Golmote, et al.

Creating a Chrome Extension in 2018: The Good, the Bad and the Meh — Talks through the development lifecycle of creating an extension and lists some of the architectural gotchas.

Tim Nolet

Time-Saving CSS Techniques to Create Responsive Images — "It's 5:00 pm on Friday, you have to finish this page, but the images won't fit the layout." Here are some tricks that might make your life easier.

Adrien Zaganelli

💻 Jobs

Frontend Developer (Bristol, UK) — Flexys is seeking a developer adept with the AngularJS framework.

Flexys Solutions

Find A FrontEnd Job Through Vettery — Vettery specializes in dev roles and is completely free for job seekers. Create a profile to get started.

Vettery

📘 Tutorials

The Whats and Whys of WCAG 2.1 — A quick run through what's new in the latest version of the Web Content Accessibility Guidelines (WCAG).

Nathan Haines

CSS Logical Properties and Values in Chromium and WebKit

Manuel Rego Casasnovas

Deploy a Git-Based Static Website in Under 5 Minutes Using Caddy. Learn How

DigitalOcean sponsor

Easy and Responsive Modern CSS Grid Layout — Ahmed Bouchefra shows how to create a responsive modern CSS Grid layout, demonstrating how to use fallback code for old browsers.

SitePoint

An Exploration of Variable Fonts at the BBC — The BBC's R&D group held an exploratory workshop to work out just what benefits variable fonts could provide on the Web.

Mathieu Triay

OffscreenCanvas: Speed up Your Canvas Operations with a Web Worker — OffscreenCanvasAPI is available as of Chrome 69 and could provide a way to boost graphics rendering performance in your web apps.

Ewa Gasperowicz (Google)

Using CSS Transforms in the Real World — How to adjust elements vertically, create nice-looking arrows, build loading animations and create flip animations.

Ilya Bodrov-Krukowski

The Possibilities of the 'color-adjust' Property — A property proposed in the future CSS Color Module Level 4 that would let you give a client permission to change a color in your CSS if it helped performance on that client.

Eric Bailey

Build Real-Time Web Experiences with A Simple but Powerful Serverless Backend

Microsoft sponsor

Redesigning a Card-Based Tumblr Layout with CSS Grid

Giulio Mainardi

Can I Use..? CSS's 'justify-content: space-evenly' — justify-content: space-evenly distributes the space between items evenly with equal space on the edges, unlike space-around. It's supported by most browsers now.

Can I Use

Practical CSS Scroll Snapping — CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. Here's a look at using it with iOS.

Max Kohler

Online Graduate Software Engineering Program. Java™, C#, HTML, CSS and More

Regis University sponsor

🔧 Code and Tools