Collective #609
Publikováno: 11.6.2020
Frontend Mentor Challenges * Shape Divider App * :is() and :where() * No Design Development * HTML5 Boilerplate 8.0.0
The post Collective #609 appeared first on Codrops.
Inspirational Website of the Week: Studio Almond
Studio Almond has an equisitely fine design with some lovely animations. Our pick this week.
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.
Color Copy Paste
Cross-platform color copy paste from phone’s camera to web, Figma and Sketch plugin.
Hybrid positioning with CSS variables and max()
Lea Verou shares a solution for a tricky layout problem.
Shape Divider App
Create fully responsive SVG shape dividers with customised code.
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.
Perceptually Smooth Multi-Color Linear Gradients
An interactive article by Matt DesLauriers on how to create perceptually smooth CIELAB spline gradients.
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.
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.
CSS tip
A great tip by Hakim El Hattab on using inset box-shadows.
The complete guide to CSS media queries
A packed guide on media queries and how to use them.
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.
HTML5 Boilerplate 8.0.0 Released
Read all about the 10th anniversary release of the epic HTML5 Boilerplate.
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.
CSS Grid: Newspaper Layout
A fantastic newspaper layout made by Olivia Ng.
Web Platform Contribution Guide
A beginners guide to becoming a web platform contributor.
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.
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.
No Design Development
A collection of tools for developers who have little to no artistic talent.
The Surprising Things That CSS Can Animate
Will Boyd explores some not-so-usual CSS properties for animations.
JazzKeys
JazzKeys lets you sculpt your messages using music.
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”.
Supporting Dark Mode in Your Website
Another good guide on implementing light and dark modes on websites.
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.
Drag to confirm
A very nice button interaction idea by Aaron Ilker.
Grid.js
In case you didn’t know about it: Grid.js is a lightweight, advanced table plugin that works everywhere.
Blobs
Another gem you migh have missed: Customizable blobs as SVG and Flutter Widget.
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.
The post Collective #609 appeared first on Codrops.