Collective #648

Inspirational Website of the Week: Universal Favourite
This studio's website has a slick and sexy design with many lovely details.
Get inspired
Beautifully designed workspaces for data import
Collaborative workspaces built for customer data onboarding. Import, format & merge messy spreadsheets with Flatfile Concierge. Best of all? No code required.

CSS transitions and hover animations, an interactive guide
A comprehensive guide about CSS transitions which takes a look at the fundamental building blocks we need to create microinteractions and other animations.
Read it
Fluid typography with CSS clamp
Learn to create a simple, accessibility friendly and configurable fluid type system that uses modern CSS sizing functions.
Read it
Why I Still Use RSS
Read why the Internet, and what it stood for, peaked with RSS, and why you should use it.
Read it
About Us Pop-Out Effect
A great effect using clip-path: path() by Mikael Ainalem.
Check it out
Graxel
A pocket doodling editor in pixel art made by Max Wellito.
Check it out
Prefers-contrast: forced is a mistake
Kilian Valkhof explains why he feels that prefers-contrast: forced is a mistake in the making.
Read it
Sharing data between CSS and JavaScript using custom properties
Christian Heilmann shows how to manipulate CSS custom properties with JavaScript.
Read it
Developing a performant custom cursor
A great article by Stefan Vitasovic on how to implement a custom cursor the right way.
Read it
Tiny Blocks
Tiny Blocks is a curated collection of inspiring user interfaces from the web.
Check it out
Finding an Element's Nearest Relative Positioned Ancestor
Michelle Barker shows how to find the nearest positioned parent in JavaScript, right in the browser console.
Read it
Interactive particles text create with three.js
A very nice particle effect on a text made by Ricardo Sanprieto.
Check it out
BitmapFonts
A gigantic collection of bitmap fonts pulled from various demoscene archives over the years.
Check it out
Same Energy
Jacob Jackson has been working on a visual search engine called Same Energy for the past couple of months. Give it a try, it's amazing!
Check it out
Clipping Scrollable Areas On The inline-start Side
A note regarding how the browser deals with clipping scrollable areas on the block-start and inline-start sides.
Check it out
Obstacles
A supercool Three.js and Cannon.js demo by Ion Drimba Filho.
Check it out
VOLE.wtf
The home of Can You Draw a Perfect Circle?, Hit the High Notes, Kick the Ball Back, Programming Language Inventor or Serial Killer?, ButtyStock, Goth or Moth? and oodles more. Formerly known as ‘malevole’.
Check it out
Uniwidth typefaces for interface design
A short, handy compilation of uniwidth typefaces by Lisa Staudinger.
Check it out
Underwater
A beautiful water effect made by Ko Yelie. Another great demo is Shooting Star.
Check it out
Haven: Host your own private blog
With Haven (formerly SimpleBlog), you choose who gets to see your website instead of trusting a big company to control who gets access on your behalf.
Check it out
Form.taxi
Submit your web forms with form.taxi — no programming, PHP scripting, or FormMailer required. Free for small websites.
Check it out
My 90's TV
Go back to the 1990's via this nostalgic TV simulator and relive the original ads, music videos, movie trailers, shows and more!
Check it out
Loudreader
The Web's only usable ebook reader inside a browser.
Check it out
UI Interactions & Animations Roundup #14
Some selected animation shots that explore experimental and modern ideas for interactions on the web.
Check it out
Simple CSS Line Hover Animations for Links
A couple of simple & subtle CSS-based line hover animations for links.
Check it out