Collective #675
Publikováno: 19.8.2021
CSS accent-color * Shared Element Transition API * Breaking the web forward * MIDIVal
The post Collective #675 appeared first on Codrops.
Inspirational Website of the Week: Kookslams Hard Seltzer
A very fresh design with great summer vibes and lots of fun details. Our pick this week!
Seamless creation from concept to production with Editor X
Create dynamic and powerful web experiences with responsive CSS combined with smooth drag & drop.
Smooth and simple page transitions with the shared element transition API
Learn how to use shared element transitions in this article by Jake Archibald.
CSS accent-color
Learn how to bring your brand color to built-in HTML form inputs with one line of code.
Breaking the web forward
A sobering article by Peter-Paul Koch on the current lamentable state of browsers and the web where “[c]omplex systems and arrogant priests rule”.
Practical Uses of CSS Math Functions: calc, clamp, min, max
Review the four best supported CSS math functions, and see how they can be used in both practical and unexpected ways, such as within gradients and color functions and in combination with CSS custom properties. By Stephanie Eckles.
Building a Cool Front End Thing Generator
John Polacek shows how building a tool that can generate some cool front-end magic can help you learn something new, develop your skills and maybe even get you a little notoriety.
A guide to designing accessible, WCAG-compliant focus indicators
A helpful reference aimed at both designers who want to learn about accessibility considerations for designing focus indicators, as well as developers who want to implement them. By Sara Soueidan.
Why lab and field data can be different (and what to do about it)
Learn why tools that monitor Core Web Vitals metrics may report different numbers, and how to interpret those differences. By Philip Walton.
Responsive CSS Food Truck
An amazing demo by Adam Kuhn!
Star Rating: An SVG Solution
An exploration of how to implement a star rating with SVG that includes half a star.
GSAP + React, First Steps & Handy Techniques
Get started using GSAP in React to build fast, powerful JavaScript animations that work everywhere.
Improving responsiveness in text inputs
Nolan Lawson explains how to make slow inputs faster.
Introducing MIDIVal: the easiest way to interact with MIDI in your browser
Kacper Kula introduces MIDIVal, a platform-agnostic library for all your MIDI needs.
Akari 1A • Pure CSS • repeating-radial-gradient
Aris Acoba made this beautiful demo using some cool gradients.
Building a switch component
A foundational overview by Adam Argyle of how to build a responsive and accessible switch component.
Sentence Forms (not Mad Libs)
Adrian Roselli dives into sentence forms, or narrative forms and writes about their challenges.
HTML is Not a Programming Language?
Alvaro Montoro shows that the three main arguments used for claiming that HTML is not a programming language are flawed or incorrect.
CSS Pencil
Very nice CSS only work by Kass.
MSI – The Match Maker
Supercool web game design: match with a similar player and test your skills in a series of mini games.
CSS Drummer
An animated CSS drummer made by Deren.
CSS Grid tooling in DevTools
Changhao Han shows how to use CSS Grid tooling in DevTools to better understand what CSS code is doing.
Create an Abstract Image Slideshow with OGL, GLSL, and GSAP
Learn how to create a WebGL-powered image slideshow animated using a single value.
The post Collective #675 appeared first on Codrops.