Collective #675

Original Source: http://feedproxy.google.com/~r/tympanus/~3/7DmigBq5OzM/

Inspirational Website of the Week: Kookslams Hard Seltzer

A very fresh design with great summer vibes and lots of fun details. Our pick this week!

Get inspired

This content is sponsored via Syndicate Ads
Seamless creation from concept to production with Editor X

Create dynamic and powerful web experiences with responsive CSS combined with smooth drag & drop.

Check it out

Smooth and simple page transitions with the shared element transition API

Learn how to use shared element transitions in this article by Jake Archibald.

Check it out

CSS accent-color

Learn how to bring your brand color to built-in HTML form inputs with one line of code.

Check it out

Breaking the web forward

A sobering article by Peter-Paul Koch on the current lamentable state of browsers and the web where “[c]omplex systems and arrogant priests rule”.

Read it

Practical Uses of CSS Math Functions: calc, clamp, min, max

Review the four best supported CSS math functions, and see how they can be used in both practical and unexpected ways, such as within gradients and color functions and in combination with CSS custom properties. By Stephanie Eckles.

Read it

Building a Cool Front End Thing Generator

John Polacek shows how building a tool that can generate some cool front-end magic can help you learn something new, develop your skills and maybe even get you a little notoriety.

Read it

A guide to designing accessible, WCAG-compliant focus indicators

A helpful reference aimed at both designers who want to learn about accessibility considerations for designing focus indicators, as well as developers who want to implement them. By Sara Soueidan.

Read it

Why lab and field data can be different (and what to do about it)

Learn why tools that monitor Core Web Vitals metrics may report different numbers, and how to interpret those differences. By Philip Walton.

Read it

Responsive CSS Food Truck

An amazing demo by Adam Kuhn!

Check it out

Star Rating: An SVG Solution

An exploration of how to implement a star rating with SVG that includes half a star.

Read it

GSAP + React, First Steps & Handy Techniques

Get started using GSAP in React to build fast, powerful JavaScript animations that work everywhere.

Read it

Improving responsiveness in text inputs

Nolan Lawson explains how to make slow inputs faster.

Read it

Introducing MIDIVal: the easiest way to interact with MIDI in your browser

Kacper Kula introduces MIDIVal, a platform-agnostic library for all your MIDI needs.

Read it

Akari 1A • Pure CSS • repeating-radial-gradient

Aris Acoba made this beautiful demo using some cool gradients.

Check it out

Building a switch component

A foundational overview by Adam Argyle of how to build a responsive and accessible switch component.

Read it

Sentence Forms (not Mad Libs)

Adrian Roselli dives into sentence forms, or narrative forms and writes about their challenges.

Check it out

HTML is Not a Programming Language?

Alvaro Montoro shows that the three main arguments used for claiming that HTML is not a programming language are flawed or incorrect.

Read it

CSS Pencil

Very nice CSS only work by Kass.

Check it out

MSI – The Match Maker

Supercool web game design: match with a similar player and test your skills in a series of mini games.

Check it out

CSS Drummer

An animated CSS drummer made by Deren.

Check it out

CSS Grid tooling in DevTools

Changhao Han shows how to use CSS Grid tooling in DevTools to better understand what CSS code is doing.

Read it

From Our Blog
Create an Abstract Image Slideshow with OGL, GLSL, and GSAP

Learn how to create a WebGL-powered image slideshow animated using a single value.

Read it

The post Collective #675 appeared first on Codrops.