Collective #609

Original Source: http://feedproxy.google.com/~r/tympanus/~3/5obsmHkgUpQ/

Inspirational Website of the Week: Studio Almond

Studio Almond has an equisitely fine design with some lovely animations. Our pick this week.

Get inspired

Our Sponsor
Create WordPress sites with easy using Divi

You’ve never built a WordPress website like this before. Divi is more than just a WordPress theme, it’s a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor.

Check it out

Color Copy Paste

Cross-platform color copy paste from phone’s camera to web, Figma and Sketch plugin.

Check it out

Hybrid positioning with CSS variables and max()

Lea Verou shares a solution for a tricky layout problem.

Check it out

Shape Divider App

Create fully responsive SVG shape dividers with customised code.

Check it out

The Mad Magazine Fold-In Effect in CSS

Thomas Park made a CSS-based web version of the wonderful Mad Magazine’s Fold-Ins by comic artist Al Jaffee.

Read it

Perceptually Smooth Multi-Color Linear Gradients

An interactive article by Matt DesLauriers on how to create perceptually smooth CIELAB spline gradients.

Check it out

Grid for layout, Flexbox for components

In this article Ahmad Shadeed explores the question about when to use Flexbox and when it’s better to use Grid.

Read it

Optimizing keyboard navigation using tabindex and ARIA

Sara Soueidan’s case study on how reducing the number of tab stops for consecutive identical links might improve the experience for keyboard users.

Read it

CSS tip

A great tip by Hakim El Hattab on using inset box-shadows.

Check it out

The complete guide to CSS media queries

A packed guide on media queries and how to use them.

Read it

Frontend Mentor Challenges

Learn how to create 14 different websites from scratch using HTML/CSS and JavaScript in this live series from the Frontend Mentor website.

Watch it

HTML5 Boilerplate 8.0.0 Released

Read all about the 10th anniversary release of the epic HTML5 Boilerplate.

Read it

Cool Little CSS Grid Tricks for Your Blog

Join Ana Tudor on an insightful journey through CSS madness and how to solve an interesting layout problem.

Read it

CSS Grid: Newspaper Layout

A fantastic newspaper layout made by Olivia Ng.

Check it out

Web Platform Contribution Guide

A beginners guide to becoming a web platform contributor.

Check it out

CSS :is() and :where() are coming to browsers

Read how the new CSS :is() and :where() pseudo-classes are now supported in some browsers. By Šime Vidas.

Check it out

Revisiting Array.reduce()

Chris Fernandi revisits the Array.reduce() examples from one of his previous articles, and shows how he would approach those same tasks today.

Read it

No Design Development

A collection of tools for developers who have little to no artistic talent.

Check it out

The Surprising Things That CSS Can Animate

Will Boyd explores some not-so-usual CSS properties for animations.

Read it

JazzKeys

JazzKeys lets you sculpt your messages using music.

Check it out

How Wikipedia Lost 3 Billion Organic Search Visits To Google in 2019

A very interesting article on Wikipedia’s traffic loss due to “zero-click results”.

Read it

Supporting Dark Mode in Your Website

Another good guide on implementing light and dark modes on websites.

Read it

The Need for Speed, 23 Years Later

An short analysis on how, in spite of an increase in Internet speed, webpage speeds have not improved over time.

Read it

Drag to confirm

A very nice button interaction idea by Aaron Ilker.

Check it out

Grid.js

In case you didn’t know about it: Grid.js is a lightweight, advanced table plugin that works everywhere.

Check it out

Blobs

Another gem you migh have missed: Customizable blobs as SVG and Flutter Widget.

Check it out

From Our Blog
How to Create a Motion Hover Effect for a Background Image Grid

A short tutorial on how to achieve a motion hover effect on a background image grid.

Check it out

The post Collective #609 appeared first on Codrops.