Collective #681
Publikováno: 30.9.2021
LittleJS * ssshape * Using Modern Image Formats: AVIF And WebP * Sci-Fi Art: A Vacuum From Space
The post Collective #681 appeared first on Codrops.

Inspirational Website of the Week: THE SHIFT
An overall beautiful design with lots of details and creative typography. 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.

Using Modern Image Formats: AVIF And WebP
Learn how modern image formats (AVIF or WebP) can improve compression by up to 50% and deliver better quality per-byte while still looking visually appealing in this article by Addy Osmani.

Drawing in CSS – Sci-Fi Art: A Vacuum From Space
Ben Evans’ master piece that he created over the course of one year! Insane CSS art!

LittleJS
LittleJS is a lightweight 2D JavaScript game engine with a super fast WebGL rendering system. Learn more about it in this article.

Self-Parking Car in 500 Lines of Code
An article about training cars to do self-parking using a genetic algorithm.

Bringing instant page-loads to the browser through speculative prerendering
Learn more about speculative prerendering in the browser and how to participate in Chrome origin trial.

20 Reasons To Quit Social Media
20 very valid reasons to quit social media and experience real life.

ssshape
Simple organic/blob shape generator that allows you to control the final shape.

Charlie Le Maignan: Club des DA
A fantastic showcase of Charlie Le Maignan’s recent animated type project.

Container Units Should Be Pretty Handy
Read how container queries and container units will hopefully soon be game changers.

Pre-Generate Static Pages with Next.js
In this lesson we will learn how to generate static pages at build time using the getStaticProps function in Next.js. By Jon Meyers.

ct.css
Visualize the <head> with these styles made by Harry Roberts.

Tool.Graphics
Various art generators to create unique works. Made by Andrey Andronov.

How I make CSS Art
Want to know how to make CSS Art? In this blog post Yosra Emad explains in detail how to create CSS art and have fun with it.

Product Showcase UI
A beautiful showcase slideshow by Aysenur Turk.

LuckyResumeMaker
Make a job-winning resume in minutes. Download the PDF for free. No sign-up. No subscription.

Two new color spaces for color picking – Okhsv and Okhsl
Learn about Okhsv and Okhsl, Björn Ottosson’s attempts at making better color pickers for the sRGB gamut.

Understanding min-content, max-content, and fit-content in CSS
Learn about fit-content, min-content, and max-content in CSS and how to use them in real-world projects.

Kinetic Typography Page Transition
A concept for a kinetic typography based page transition where background letters come into the foreground and reveal a new content level.

UI Interactions & Animations Roundup #19
The best motion design and animation shots from Dribbble collected over the past couple of weeks.
The post Collective #681 appeared first on Codrops.