Collective #712

Original Source: https://tympanus.net/codrops/collective/collective-712/

Inspirational Website of the Week: Studio Beaucoup

A hot, unique design that shines with great typography and a fresh pattern use. Out pick this week.

Get inspired

Bringing page transitions to the web

Learn all about the new APIs that are coming to simplify creating page transitions, building on top of CSS animations and the web animation API.

Watch it

The Surprising Truth About Pixels and Accessibility

Learn about the accessibility implications of using pixels vs rems, and how to determine the best unit to use in any scenario.

Read it

Building a button component

The perfect foundational overview of how to build color-adaptive, responsive, and accessible <button> components. Bonus: you’ll learn about very useful CSS selectors, too! By Adam Argyle.

Check it out

The Era of Rebellious Web Design Is Here

A super-interesting article on the new emerging style of the web that is bold, nostalgic and unique based on the example of BDG’s websites.

Read it

Variable fonts support in Figma

Variable fonts support in Figma allows you to broaden the possibilities of your designs and typography with a wide range of font styles and features.

Check it out

Web Applications 101

Everything you need to know about web applications in modern web development. You will learn about traditional websites, full-stack web applications, client-side and server-side rendering/routing and many more topics.

Read it

How to Make a CSS Slinky in 3D

A fantastic tutorial by Jhey Tompkins where he shows how to create a 3D slinky using CSS.

Read it

Advanced JavaScript Objects

An e-book entirely about JavaScript objects.

Check it out

Balanced Color Palettes

A small but powerful technique perfect for crafting balanced color palettes in generative pieces. By George Francis.

Check it out

My First Web Component

Raymond Camden shares how he made his very first simple web component.

Read it

Building an animated piano keyboard with JavaScript and MIDI

Jamie Smith shows how he built a simple on-screen keyboard for his jazz piano tutorial website JazzKeys.fyi.

Read it

Shrink.media

Reduce the file size of your images with an intelligent compression technique.

Check it out

:where() :is() :has()? New CSS selectors that make your life easier

Learn all about the new CSS :is(), :where() and :has() pseudo-classes.

Read it

VectorWiki

Find and download SVG vector logos from many brands.

Check it out

One Weird Trick to Try @parcel/css on CodePen

Chris Coyier shows how to use Parcel/css in Codepen.

Check it out

A Visual Reference of CSS Flexbox

A compact visual reference for CSS Flexbox.

Check it out

Dreamwave 3D Demo

Dreamwave is a web-based platform to deliver mind-blowing Virtual Events and Microverses for brands and creators.

Check it out

> hackerforms

Create user interfaces straight from your Python code – no frontend work required.
Deploy instantly and share with anyone.

Check it out

Please, stop disabling zoom

Read why Manuel Matuzović urges developers to stop disabling zoom on websites.

Read it

Beautify GitHub Profile

Pimp your GitHub profile with this repo.

Check it out

Building a Mini Next.js

To demonstrate fastify-vite‘s power and flexibility, Jonas Galvez builds a mini Next.js with it.

Read it

From Our Blog
Image To Grid Transition

A simple transition where a large image animates to its place in a grid.

Check it out

The post Collective #712 appeared first on Codrops.