Collective #615
![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_WOTW.jpg?x86293)
Inspirational Website of the Week: Sweet punk
Great visual content with a clear design and interesting details. Our pick this week.
Get inspired![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/06/C609_Divi.jpg?x86293)
Build websites with the most popular WordPress theme in the world
With the Divi Layout Packs you'll get world-class designs ready to be used for your client projects.
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_static.jpg?x86293)
Primo
Primo is an all-in-one IDE, CMS, component library, and static site generator.
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_wtf.jpg?x86293)
What the f*** is ...?
An opinionated glossary of computer science terms for front-end developers by Dan Abramov. Read more about it in the repo.
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_easing.jpg?x86293)
CSS easing
Adam Argyle shares 18 hip cubic-bezier easing functions in handy variables with us.
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_hands.jpg?x86293)
3D Hands gestures
An amazing free 3D hands gestures library with 12 hands gestures in 9 different skin tones and with 3 sleeve types.
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_3dbook.jpg?x86293)
3D Book Image CSS Generator
Fantastic tool: Generate an animated 3D image from a book cover and export to HTML/CSS to embed on your website.
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_property.jpg?x86293)
@property: giving superpowers to CSS variables
Una Kravets introduces the Houdini Properties and Values API which is coming to your CSS file in Chromium 85.
Read it![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_cssfordesigners.jpg?x86293)
Things I Wish I’d Known About CSS
Some useful things to understand before starting out with CSS. By Dave Smyth.
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_backgroundcss.jpg?x86293)
Understanding CSS Multiple Backgrounds
In this article, Ahmad Shadeed explains the background-image property in detail, and provides a visual explainer on how multiple backgrounds can be stacked.
Read it![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_cards.jpg?x86293)
CSS leaning card effect
A beautiful card effect made by Lynn Fisher.
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_eventdel.jpg?x86293)
A Simple Explanation of Event Delegation in JavaScript
Dmitri Pavlutin explains event delegation which is a useful pattern to listen for events on multiple elements using just one event handler.
Read it![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_import.jpg?x86293)
Import non-ESM libraries in ES Modules, with client-side vanilla JS
Lea Verou explores some strategies of importing non-ESM libraries in ES modules.
Read it![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_17.jpg?x86293)
A CSS only “click to animate gif” solution
Christian Heilmann shares a quick experiment in pure CSS how to cover a GIF with a play button instead of playing it
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_warp2.jpg?x86293)
Warp SVG Online
A nice tool that can warp and distort SVGs.
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/Screen-Shot-2020-07-23-at-19.48.01.jpg?x86293)
css-media-vars
A brand new way to write responsive CSS. Named breakpoints, DRY selectors, no scripts, no builds, vanilla CSS.
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_csslegib.jpg?x86293)
Modern CSS Techniques To Improve Legibility
Edoardo Cavazza covers how to improve websites legibility using some modern CSS techniques.
Read it![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_cssline.jpg?x86293)
A CSS-only, animated, wrapping underline
NickyMeuleman explores how to create wrapping underlines that can be animated.
Read it![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_githubauto.jpg?x86293)
Building a self-updating profile README for GitHub
Simon Willison shows how to implement a GitHub Action to automatically keep a profile README up-to-date.
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_stacking.jpg?x86293)
CSS Painting Order
An interesting article on how a browser determines what order to paint content in.
Read it![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_responsive.jpg?x86293)
Beyond screen sizes: responsive design in 2020
Kilian Valkhof thinks we're now at a point where we can start considering a new type of responsiveness for websites.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/Screen-Shot-2020-07-23-at-19.58.39.jpg?x86293)
Rich HTML in GitHub README
Learn how to create a rich HTML document enveloped in an SVG file.
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_scroll.jpg?x86293)
Mars Explorer ScrollTrigger demo
Hai Le made this fantastic GSAP ScrollTrigger plugin example.
Check it out![Collective 615 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C615_drops.jpg?x86293)
Droplets
Stunningly realistic CSS droplets by Oscar Salazar.
Check it out