Collective #712
Publikováno: 19.5.2022
Bringing page transitions to the web * Building a button component * Web Applications 101
The post Collective #712 appeared first on Codrops.
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.
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.
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.
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.
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.
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.
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.
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.
Advanced JavaScript Objects
An e-book entirely about JavaScript objects.
Balanced Color Palettes
A small but powerful technique perfect for crafting balanced color palettes in generative pieces. By George Francis.
My First Web Component
Raymond Camden shares how he made his very first simple web component.
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.
Shrink.media
Reduce the file size of your images with an intelligent compression technique.
:where() :is() :has()? New CSS selectors that make your life easier
Learn all about the new CSS :is(), :where() and :has() pseudo-classes.
VectorWiki
Find and download SVG vector logos from many brands.
One Weird Trick to Try @parcel/css on CodePen
Chris Coyier shows how to use Parcel/css in Codepen.
A Visual Reference of CSS Flexbox
A compact visual reference for CSS Flexbox.
Dreamwave 3D Demo
Dreamwave is a web-based platform to deliver mind-blowing Virtual Events and Microverses for brands and creators.
> hackerforms
Create user interfaces straight from your Python code – no frontend work required.
Deploy instantly and share with anyone.
Please, stop disabling zoom
Read why Manuel Matuzović urges developers to stop disabling zoom on websites.
Beautify GitHub Profile
Pimp your GitHub profile with this repo.
Building a Mini Next.js
To demonstrate fastify-vite‘s power and flexibility, Jonas Galvez builds a mini Next.js with it.
Image To Grid Transition
A simple transition where a large image animates to its place in a grid.
The post Collective #712 appeared first on Codrops.