Collective #770
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
This content is sponsored via BuySellAds
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
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
BentoGrids
BentoGrids is a curated collection of bento designs for your inspiration.
Check it out
SVG Hub
A library of over 70 custom-color elements ready to paste into your project.
Check it out
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
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
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
Optimus Prime with CSS Transform
Super cool demo by Jhey of Optimus Prime transforming using CSS transforms!
Check it out
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
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
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
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
The New CSS
Matthias Ott discusses the evolution of CSS and its growing importance as a design tool for the web.
Read it
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
MeshPortalMaterial
Eugene tried out MeshPortalMaterial and came up with a great demo.
Check it out
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
Design System Canvas
A one page plan to help designers champion the value of design systems.
Check it out
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
Novel
A Notion-style WYSIWYG editor with AI-powered auto-completion.
Check it out
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
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
From our blog
4 Exclusive Demos: Slideshows & Typographic Animations
Four distinct demos, from image slideshows to on-scroll typography and hover effects.
Check it out
From our blog
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