Collective #660
Publikováno: 6.5.2021
Container Queries Explainer & Proposal * Mantine * Fluid Typography * Fower
The post Collective #660 appeared first on Codrops.
Inspirational Website of the Week: Paul & Henriette
Sharp minimalism with great typography and a focus on beautiful image and layout animations. Our pick this week.
Instant websites for your clients with Divi Layout Packs
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
The Humble <img> Element And Core Web Vitals
An excerpt from Addy Osmani’s new book Image Optimization.
Portfolio 2021 technical case study — Rendering a whole HTML website in WebGL
Martin Laxenaire shows how he created his portfolio using his own vanilla JavaScript open source tools.
Container Queries Explainer & Proposal
Miriam Eric Suzanne explains the proposed solution for container queries and shows how to use them.
The State of CSS Cross-Browser Development
Ahmad Shadeed thoughts on why cross-browser development is better than in the past.
Mantine
Mantine is a React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience.
Two options for using custom properties
Peter-Paul Koch shares an efficient way of using custom properties for component styling.
Toggling CSS Custom Properties with Radio Buttons
Michelle Barker explains how to use custom properties for a toggle functionality.
Iconic
A fantastic set of pixel-perfect icons with new icons added every week.
Scroll-Linked Animations with CSS Scroll-Timeline (CSS Café)
Bramus shares his talk covering Scroll-Linked Animations with CSS @scroll-timeline on CSS Café.
Fluid Typography
Calculate CSS declarations for beautiful fluid typography headings. Made by Erik André.
(t,i,x,y,z) => “creative code golfing”
A minimalist three-dimensional coding environment. Control 8x8x8 dots with a single JavaScript function.
Fower
A utility-first CSS-in-JS library for rapid UI development.
CSS Cuboid Generator
A fantastic cuboid generator made with React and Prism by Jhey.
Profiling site speed with the Chrome DevTools Performance tab
Learn how to use the Chrome DevTools Performance tab to measure and improve the speed of your website.
3D Game Shaders For Beginners
A step-by-step guide to implementing SSAO, depth of field, lighting, normal mapping, and more for your 3D game.
Exploring color-contrast() for the First Time
Chris Coyier explores the color-contrast() function in CSS which is freshly supported in Safari Technical Preview 122.
How to Create Actions for Selected Text With the Selection API
Preethi shows how to reveal an options panel when selecting text on a website.
Don’t Confuse Function Expressions and Function Declarations in JavaScript
What are the differences between function declarations and function expressions in JavaScript? Find out in this article by Dmitri Pavlutin.
Measuring Web Performance in 2021: The Definitive Guide
A guide to the metrics, methods, and measurements of web performance in 2021.
Dynamic CSS Masks with Custom Properties and GSAP
Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect in this article by Michelle Barker.
The post Collective #660 appeared first on Codrops.