Collective #601
Publikováno: 9.4.2020
LCH colors in CSS * Frontend Mentor * Responsive Images the Simple Way * Button?Design * Interactive Timetable
Collective #601 was written by Pedro Botelho and published on Codrops.

Inspirational Website of the Week: Stone & Style
A wonderful design that presents with the central element in a unique way. Our pick this week.
Get inspired
Start your own freelance business by becoming a Divi expert
Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.
Start learning now
LCH colors in CSS: what, why, and how?
Lea Verou gets us excited about LCH colors in CSS and explains how to put them to use.
Read it
Frontend Mentor
Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.
Check it out
Building an Interactive Timetable
Michelle Barker shares how she built an interactive timetable.
Read it
BEM Naming Cheat Sheet
A visual tool that provides naming-suggestions for CSS classes using the BEM naming convention.
Check it out
Radius: A Design System Accelerator
The Radius DS is a collection of open-source tools and libraries that allow you to accelerate your design system.
Check it out
Responsive Images the Simple Way
An easy-to-follow guide on how to get responsive images right. By Scott Vandehey.
Read it
Circle Swap Photo Gallery
A playful gallery with a really cool transition effect made with React and GSAP. By Steve Gardner.
Check it out
Button?Design
All you need to know about button design, one of the main interactive building blocks for creating a user interface. An article by Taras Bakusevych.
Read it
Fullstack
A little game by Hakim El Hattab where you stack checkboxes. Also, check out this remix by Phillipp Kief.
Check it out
Sections 2 Wireframe Kit
Sections 2 is a library of UI components for rapidly building landing page wireframes. The free version includes 10 ready-made screens in light mode.
Check it out
Cross-origin fetches
In this episode of HTTP 203, Jake and Surma dive into the world of cross-origin fetches, and how the web is still battling against some early design mistakes.
Watch it
Linux Man Pages — Dash Dash
Dash Dash sets the linux documentation in a beautiful collection of typefaces to make the technical content more approachable.
Check it out
Font Books
Font Books is a collection of original typefaces designed to help people read and understand classic literature better.
Check it out
MVP.css
In case you didn’t know it yet: MVP.css is an out-of-the box CSS styling for HTML elements. No class names, no framework to learn.
Check it out
Button bending hover
Some button bending magic by Aaron Iker.
Check it out
WebGL water ripples
An amazing demo by Martin Laxenaire.
Check it out
Rapid Image Layers Animation
A rapid animation of multiple layers of images for intros or page transitions made with GSAP.
Check it outCollective #601 was written by Pedro Botelho and published on Codrops.