Collective #615
Publikováno: 23.7.2020
Primo * What the f*** is ...? * 3D Book Image CSS Generator * Event Delegation in JavaScript * CSS easing
The post Collective #615 appeared first on Codrops.

Inspirational Website of the Week: Sweet punk
Great visual content with a clear design and interesting details. Our pick this week.

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.

Primo
Primo is an all-in-one IDE, CMS, component library, and static site generator.

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.

CSS easing
Adam Argyle shares 18 hip cubic-bezier easing functions in handy variables with us.

3D Hands gestures
An amazing free 3D hands gestures library with 12 hands gestures in 9 different skin tones and with 3 sleeve types.

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.

@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.

Things I Wish I’d Known About CSS
Some useful things to understand before starting out with CSS. By Dave Smyth.

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.

CSS leaning card effect
A beautiful card effect made by Lynn Fisher.

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.

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.

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

Warp SVG Online
A nice tool that can warp and distort SVGs.

css-media-vars
A brand new way to write responsive CSS. Named breakpoints, DRY selectors, no scripts, no builds, vanilla CSS.

Modern CSS Techniques To Improve Legibility
Edoardo Cavazza covers how to improve websites legibility using some modern CSS techniques.

A CSS-only, animated, wrapping underline
NickyMeuleman explores how to create wrapping underlines that can be animated.

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.

CSS Painting Order
An interesting article on how a browser determines what order to paint content in.

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.

Rich HTML in GitHub README
Learn how to create a rich HTML document enveloped in an SVG file.

Mars Explorer ScrollTrigger demo
Hai Le made this fantastic GSAP ScrollTrigger plugin example.

Droplets
Stunningly realistic CSS droplets by Oscar Salazar.
The post Collective #615 appeared first on Codrops.