Collective #770
![C770_WOTW](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_WOTW.jpg?x25555)
Inspirational Website of the Week: Euphemia
We love the website of Euphemia for its clean and slick design. It has a wonderful motif and some playful interactions. Our pick for the inspirational website of the week.
Get inspired![Collective 764 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/05/codrops_600×400-1.png?x25555)
Use Kintone to Spend Less Time on the Back-end
Kintone is a powerful web database, providing developers with a convenient environment to test out front-end coding ideas, without having to run a backend.
Find out more![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_statecss.jpg?x25555)
State of CSS 2023
Join the State of CSS survey and contribute to tracking the exciting evolution of upcoming features and libraries. By participating, you can help developers make informed decisions about which new technologies to prioritize.
Check it out![C770_bento](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_bento.jpg?x25555)
BentoGrids
BentoGrids is a curated collection of bento designs for your inspiration.
Check it out![C770_svghub](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_svghub.jpg?x25555)
SVG Hub
A library of over 70 custom-color elements ready to paste into your project.
Check it out![C770_inspiration](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_inspiration.jpg?x25555)
CallToInspiration
A great hub for web design inspiration, featuring a vast collection of screenshots that offer ideas for components and interesting details of websites.
Check it out![C770_giraffe](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_giraffe.jpg?x25555)
Custom giraffe caret
Stanko shows how to use CSS to customize the input caret in a fun and creative way by replacing it with an element rendered at the exact same position, such as a dancing giraffe or a lion.
Read it![C770_blur](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_blur.jpg?x25555)
Frosted Glass
An amazing demo of a depth-based blur effect in CSS made by Shu. Dan Hollick made an explanatory image showing how it works.
Check it out![C770_optimus](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_optimus.jpg?x25555)
Optimus Prime with CSS Transform
Super cool demo by Jhey of Optimus Prime transforming using CSS transforms!
Check it out![C770_writex](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_writex.jpg?x25555)
Writex.io
Writex.io is an all-in-one AI-driven online platform for writers, providing powerful editing, reading, and publishing features.
Check it out![C770_text](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_text.jpg?x25555)
Fit-to-Width Text
Roman Komarov explores using scroll-driven animations in CSS to solve fit-to-width text without hardcoded parameters.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_race.jpg?x25555)
Montblanc Explorer Platinum - The Race
A wonderful Three.js race implementation by Merci-Michel where you cross the mountains on a futuristic circuit.
Check it out![C770_qr](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_qr.jpg?x25555)
How to make a QR code with Stable Diffusion
This article provides a step-by-step guide on how to generate artistic QR codes using Stable Diffusion, including tips and other prompts to try.
Check it out![C770_css](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_css.jpg?x25555)
The New CSS
Matthias Ott discusses the evolution of CSS and its growing importance as a design tool for the web.
Read it![C770_ch](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_ch.jpg?x25555)
Be careful with ch units
Silvestar Bistrović shares how he discovered an issue with Cumulative Layout Shift (CLS) on a website caused by the use of system fonts and CSS ch units.
Read it![C770_glasses](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_glasses.jpg?x25555)
MeshPortalMaterial
Eugene tried out MeshPortalMaterial and came up with a great demo.
Check it out![C770_comic](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_comic.jpg?x25555)
Free Font: Comic Mono
A new legible font that is a fork of Comic Shanns and has been adjusted for better display alongside system fonts.
Check it out![C770_canvas](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_canvas.jpg?x25555)
Design System Canvas
A one page plan to help designers champion the value of design systems.
Check it out![C770_gpteng](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_gpteng.jpg?x25555)
GPT Engineer
A tool that generates an entire codebase based on a prompt, allowing users to specify what they want to build and prompting feedback from the AI.
Check it out![C770_novel](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_novel.jpg?x25555)
Novel
A Notion-style WYSIWYG editor with AI-powered auto-completion.
Check it out![C770_googlephotos](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_googlephotos.jpg?x25555)
Google Photos Backup
A useful project called Google Photos Backup, which uses Playwright to download photos in original quality and incrementally from Google Photos.
Check it out![C770_sketch](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_sketch.jpg?x25555)
Sketch.systems
Sketch.systems is a tool for software designers to help them think through complex product behavior, allowing them to sketch out states, add prototypes, and clarify questions with ease.
Check it out![C770_demos](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_demos.jpg?x25555)
4 Exclusive Demos: Slideshows & Typographic Animations
Four distinct demos, from image slideshows to on-scroll typography and hover effects.
Check it out![C770_slices](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/06/C770_slices.jpg?x25555)
Coding the Sliced Image Hover Effect from Quai Network
Learn how to code a similar hover animation to the one seen on the website of Quai Network.
Check it out