Syndicate Ads | The Blog Pros

October 14, 2021

Inspirational Website of the Week: Victoire Douy

A unique design with engaging interactivity that perfectly represents the artist. Our pick this week.

Building a multi-select component

A foundational overview of how to build a responsive, adaptive, and accessible, multiselect component for sort and filter user experiences.

Read it

How to win at CORS

Jake Archibald built an interactive app, the CORS playground, and shows how to use it.

Check it out

js13kGames Winners 2021

The winners of this year’s js13kGames JavaScript coding competition.

Check it out

Kuma

Kuma is a self-hosted monitoring tool similar to “Uptime Robot” with a great UI. Learn more about it in this video.

Check it out

YoHa

YoHa is a hand tracking engine that is built with the goal of being a versatile solution in practical scenarios where hand tracking is employed to add value to an application.

Check it out

How To: Create the Stripe Website Gradient Effect

Learn how to create the amazing tilted gradient animation effect from the Stripe website. By Kevin Hufnagl.

Read it

Rowy

A free Airtable alternative: Manage Firestore data in a spreadsheet-like UI, write Cloud Functions effortlessly in the browser, and connect to third party platforms.

Check it out

Announcing Parcel v2!

The Parcel team shares the important announcement that v2.0.0 stable is now available.

Check it out

Huetone

Use LCH color space to come up with predictable and accessible color palettes.

Check it out

Flowrift

A growing library filled with Tailwind CSS UI blocks, components and templates.

Check it out

Dos-like

An engine for making things with a MS-DOS feel, but for modern platforms.

Check it out

Gentle Introduction to Realtime Fluid Simulation for Programmers and Technical Artists

A simple intuitive breakdown of fluid simulation for programmers and technical artists. By Shahriar Shahrabi.

Read it

I keep making things out of checkboxes

In case you missed it: An interesting article by Bryan Braun on making things out of checkboxes.

Read it

Bor

A user-friendly, tiny source code searcher written by pure Python.

Check it out

What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?

Christian Heilmann writes about a new experiment in the next version of Microsoft Edge that will allow you to use Visual Studio Code as the editor of the in-browser Developer Tools.

Read it

Making the whole web better, one canvas at a time.

Brian Kardell writes about Canvas and why we should care about it even if we don’t directly use the API.

Read it

FlipBoxes

Some creative flipping checkboxes made by Amit Sheen.

Check it out

Futurecoder

Learn Python from scratch with this interactive learning tool, friendly for beginners.

Check it out

How I built a modern website in 2021

Kent C. Dodds rewrote his website using the latest technologies and shares what he used and how he did it.

Read it

3dicons

Some months ago, Vijay Verma shared 60+ free and open-source 3D icons. This collection has now grown to over a thousand icons! Worth checking out again.

Check it out

The post Collective #683 appeared first on Codrops.

October 7, 2021

Inspirational Website of the Week: Lunchbox

It’s hip, it’s cool and the colors pop! We love this fresh design and the details. Our pick this week.

Get inspired

My Challenge to the Web Performance Community

Philip Walton highlights how “getting a 100 on Lighthouse is definitely a very good sign, but it doesn’t guarantee that your site will be totally free of any performance issues in the real world”.

Read it

The State of CSS Survey

The annual survey about the latest trends in CSS.

Check it out

Atropos

Atropos is a lightweight, free and open-source JavaScript library to create touch-friendly 3D parallax hover effects.

Check it out

React Preview

React Preview helps you preview any React component in your codebase.

Check it out

A Guide To CSS Debugging

Stephanie Eckles shows how to go about debugging in CSS, exploring techniques to prevent bugs altogether.

Read it

Conditional Border Radius In CSS

Ahmad Shadeed writes about how to use CSS comparison functions to create a conditional border radius.

Read it

Instanced Line Rendering Part II: Alpha blending

Rye Terrell’s followup to his post about instanced line rendering that allows for artifact-free alpha blending.

Check it out

Designing Accordions: Best practices

Roman Kamushken shares some accordion samples, templates, and UX cases for a smooth experience.

Read it

The Andrei Sakharov Museum

A great storytelling experience with an amazing design.

Check it out

CSS Gradient Editor

Beyond CSS gradients, this generator also has interesting patterns powered by gradients.

Check it out

Audio-reactive visual with Three.js

A beautiful audio-reactive demo created by Francesco Michelini using ThreeJS.

Check it out

Safe DOM manipulation with the Sanitizer API

Learn about the new Sanitizer API, that aims to build a robust processor for arbitrary strings to be safely inserted into a page.

Read it

Tidy Viewer

Tidy Viewer is a cross-platform CLI CSV pretty printer that uses column styling to maximize viewer enjoyment.

Check it out

Medio – Web Design Agency Template

A clean and minimal Bootstrap 5 website template perfect for web design agencies or digital marketing.

Check it out

AESON

Welcome to AESON, a futuristic (and creepy) chatroom in WebGL. The project was made at Gobelins Paris during a workshop. By Thoma Lecornu. Read more about it in this tweet.

Check it out

Medusa

In case you didn’t know about it: Medusa is a headless open-source commerce platform.

Check it out

From Our Blog

How to Implement and Style the Dialog Element

Go in-depth on the native dialog HTML element with this tutorial and learn how to implement a user-friendly, accessible dialog on your website.

Read it

From Our Blog

Deconstructing the homunculus.jp Distortion with Three.js

Learn how to replicate the pixel river distortion effect seen on homunculus.js using Three.js.

Check it out

From Our Blog

Creating 3D Characters in Three.js

Are you looking to get started with 3D on the web? In this tutorial we’ll walk through creating a three-dimensional character using Three.js, adding some simple but effective animation, and a generative color palette.

Read it

From Our Blog

Inspirational Websites Roundup #30

A roundup of creative websites collected over the past couple of weeks that stand out with their great design and interactivity.

Check it out

The post Collective #682 appeared first on Codrops.

September 23, 2021

Collective #680

Inspirational Website of the Week: monopo london

An amazing mix of generous effects with great layouts and beautiful details. Our pick this week.

Get inspired

Theatre.js

Theatre.js is a new hackable JavaScript animation library with visual tools. It animates the DOM, WebGL, and any other JavaScript variable.

Check it out

Motion One: The Web Animations API for everyone

A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance. By Matt Perry.

Check it out

CSS Container Query Units

Ahmad Shadeed whos how to use units that are relative to the container size.

Read it

Simplifying Form Styles With accent-color

In this article you’ll learn what the new `accent-color` property does and how to use it alongside `color-scheme` for simple, accessible checkboxes and radio buttons.

Read it

Doom Portal in WebGL

Bruno Simon’s latest experiment: A re-creation of the Doom Portal in WebGL with Three.js.

Check it out

Kaomoji Cool Club

A nice tool that is dedicated to the art of kaomoji.

Check it out

Basic Pattern Repository

A collection of hand-coded SVG <pattern>’s, ready to be used in inline SVG. By Thomas Michael Semmler.

Check it out

Exploring the CSS Paint API: Polygon Border

Temani Afif’s last article in a series that is exploring the CSS Paint API.

Check it out

Open-Meteo

Open-Meteo offers free weather forecast APIs for open-source developers and non-commercial use. No API key is required.

Check it out

Mechanic

Mechanic is an open source framework that makes it easy to create custom, web-based design tools that export design assets right in your browser.

Check it out

HEXplorer

A great demo that visualizes how HEX colors work. By Rob DiMarzo.

Check it out

cccreate

A curated collection of tools and resources for web creators.

Check it out

Glass

Glass is a new subscription-based photo sharing app and community for professional and amateur photographers alike without dark patterns driving engagement.

Check it out

Simpler Block Spacing in WordPress with :is() and :where()

Michelle Barker shows how to use :is() and :where() to better define space between Gutenberg blocks.

Read it

Standards

A new way to design brand guidelines. A product from Standards Manual. Apply for early access.

Check it out

Q1K3

An incredible Quake clone made by Dominic Szablewski for the 2021 js13k competition.

Check it out

From Our Blog

Menu and Thumbnail Stack Animation

An animation on an image stack for a menu where the images get rearranged from a column into a row.

Check it out

The post Collective #680 appeared first on Codrops.

September 2, 2021

Collective #677

Inspirational Website of the Week: Infrared

Soft animations and a perfect color scheme make this website’s design glow. Our pick this week.

Get inspired

Access modern GPU features with WebGPU

Learn about WebGPU and how it enables high-performance 3D graphics and data-parallel computation on the web.

Read it

A Deep Dive Into The Wonderful World Of SVG Displacement Filtering

In this article, Dirk Weber explains the SVG `feDisplacementMap` filter primitive with a good number of examples to demonstrate the concept of animated displacement maps.

Read it

Why are hyperlinks blue?

Take a deep dive into the history of interfaces and link designs over the years and learn about the origin of the blue link we know today.

Check it out

An Interactive Guide to CSS Keyframe Animations with @keyframes

In this tutorial you’ll learn how CSS keyframes work from the ground up, and see how you can use them to build high-quality animations. By Josh W Comeau.

Read it

Crafting Organic Patterns With Voronoi Tessellations

Learn to create beautiful, versatile, and organic generative patterns inspired by the natural world. By George Francis.

Read it

The Beauty of Bézier Curves

A wonderful video on how Bézier curves work. By Freya Holmér.

Watch it

Buttons Generator

100+ buttons you can copy with just a click and paste into your project. By Marko Denic.

Check it out

Building A Stepper Component

Ahmad Shadeed shows how to build a horizontal and vertical stepper component with CSS flexbox.

Read it

Basement grotesque

Basement grotesque is the first font by basement.studio and they did a wonderful website to present it!

Check it out

couleur.io

A simple color tool to help you find good color palettes for your web projects. This tools spits out modern CSS you can use right away in your projects.

Check it out

Exploring the CSS Paint API: Blob Animation

Temani Afif shows how to pull off a blob animation using CSS with the CSS Paint API.

Read it

Vector? Raster? Why Not Both!

Zach Leatherman ran into an interesting problem and shared what he learned from it.

Read it

Using PDFs with the Jamstack – Building a Document Viewer

Using Adobe PDF Services to build a document viewer for your Jamstack site

Check it out

How to Use Promise.any()

Learn how to use the Promise.any() to get the first fulfilled promise from an array of promises.

Read it

Prettymaps

A small set of Python functions to draw pretty maps from OpenStreetMap data.

Check it out

A primer on the OpenAI API – Part 1

The first part in a series on learning how to use the OpenAI API. By Chris Price.

Read it

Infinity Zoom / Log Spherical Mapping

Super cool demo: taking 3D space and folding it into a sphere, using WebGL/Fragment Shader.

Check it out

From Our Blog

Surface Sampling in Three.js

Learn how to use the MeshSurfaceSampler in Three.js to create some very interesting effects.

Read it

The post Collective #677 appeared first on Codrops.

August 19, 2021

Collective #675

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

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.

August 5, 2021

Collective #673

Inspirational Website of the Week: ORCA

Super-fresh, bold and with lots of character — this website has a strong design that just works.

Get inspired

Using Absolute Value, Sign, Rounding and Modulo in CSS Today

Ana Tudor shows how to use existing CSS features to compute the values that abs(), sign(), round() and mod() should return.

Read it

CSS Nesting, specificity and you

An article on native CSS nesting which is coming to browsers soon. By Kilian Valkhof.

Read it

Mastering the Basics of Icon Design with Adrien Coquet

Learn icon design basics in Adobe Illustrator from French Graphic Designer Adrien Coquet.

Read it

How To Build Resilient JavaScript UIs

This article by Callum Hart explores how graceful degradation, defensive coding, observability, and a healthy attitude towards failures make empowers us to build UIs that are resilient.

Read it

Aligning a Button Label Vertically

How to align a button content in web fonts with large spacing above and below the text. By Ahmad Shadeed.

Read it

Blobby deer

Louis Hoebregts’ demo that shows how to render SVG with Three.js and then animate it with GSAP.

Check it out

How MDN’s autocomplete search works

Peter Bengtsson explains how MDN Web Doc’s autocomplete search works and how it was implemented.

Read it

User preference media features client hints headers

Learn about Sec-CH-Prefers-Color-Scheme client hint header that allows sites to obtain the user’s color scheme preferences optionally at request time, allowing servers to inline the right CSS and therefore avoid a flash of incorrect color theme.

Read it

Apollo

A Unix-style personal search engine and web crawler for your digital footprint. By Amir Bolous.

Check it out

Conjuring Generative Blobs With The CSS Paint API

A tutorial by George Francis where he shows how to make generative blobs utilizing the CSS Paint API.

Read it

Writing great alt text: Emotion matters

Jake Archibald writes on how to pick a proper alt text for an image.

Read it

The Remote Culture War Has Begun, And Executives Are Pumping Out “Back To Work” Propaganda

Ed Zitron writes about a new kind of “propaganda that is coming from a management elite that feels themselves losing control of workers, which is the only reason that they had them in the office in the first place”.

Read it

GPGPU Deferred Shaded Boxes

Rendering and animating lots of shaded boxes with hwoa-rang-gl. By Georgi Nikolov.

Check it out

Windmill scene

Inspired by the landscape of the Netherlands, Felix Mariotto coded this beautiful Three.js scene. Check out the repo.

Check it out

Why self hosting is important

Solène writes about the utter importance of self hosting and how to get started.

Read it

You want enabling CSS selectors, not disabling ones

Silvestar Bistrović writes about enabling selectors and why they are beneficial.

Read it

From Our Blog

Magical Marbles in Three.js

A tutorial on how to add volumetric effects to a built-in Three.js shader for an interesting marble animation.

Read it

The post Collective #673 appeared first on Codrops.

July 29, 2021

Collective #672

Inspirational Website of the Week: Post Familiar Wine

An excellent design with modern artistic details and great typography.

Get inspired

Creating An Accessible Dialog From Scratch

In this great guide, Kitty Giraudel digs into how to create a short script to create accessible dialogs.

Read it

Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines

Bramus Van Damme shows how to use the new properties of the Scroll-Linked Animations spec for controlling the time position of regular CSS Animations by scrolling.

Read it

Writing a Sokoban Puzzle Game in JavaScript

Tania Rascia shares a couple of things she learned making a Sokoban puzzle game in JavaScript.

Read it

Etienne Barbedette

What a fun web experience! Etienne shows his amazing skills in his super creative portfolio.

Check it out

Slinkity

A build plugin that can extend any 11ty site for components, page transitions, and more.

Check it out

Improving the Tesco Loan Calculator

To help communicate what a web form designer does, Chris Annetts reviewed and tried to improve the Tesco loan calculator.

Read it

Is it Time to Ditch the Design Grid?

Michelle Barker recaps the idea shared on Gridless Design and explains why we “shouldn’t be forcing content into a rigid design grid to the detriment of user experience”.

Read it

Shapecatcher

With Shapecatcher you can search through a database of characters by simply drawing your character into a box. It can find the most similar character shapes for your drawing.

Check it out

WCAG colour contrast ratio

Dan Hollick’s super interesting thread on how color contrast gets calculated and why the WCAG colour contrast ratio doesn’t always seem to work.

Check it out

Password-protected pages on Netlify

Learn how to password-protect specific pages on Netlify using serverless functions, redirects and Netlify Identity.

Read it

Thinking About The Cut-Out Effect: CSS or SVG?

A look at how CSS and SVG can be used to implement the cut-out effect. By Ahmad Shadeed.

Read it

The State of Developer Ecosystem in 2021 Infographic

A detailed report about the programming community, which covers the latest trends in languages, tools, technologies, and lifestyles of developers.

Check it out

Moving on a Penrose Triangle

A beautiful demo of the Penrose triangle with a moving ball. By Amit Sheen.

Check it out

Web Authentication: Cookies vs. Tokens

An article by Chameera Dulanga on how to choose between cookies and tokens in web authentication.

Read it

Piped

Piped is an alternative privacy-friendly YouTube frontend which is efficient by design.

Check it out

Pose Estimation

Alexandre Devaux fantastic pose estimation demo.

Check it out

What happened when I stopped using Emojis

An interesting self-imposed experiment: no emoji for 2 weeks. Clo S shares the results from this interesting endeavor.

Read it

Web Features That May Not Work As You’d Expect

Farai Gandiya shares some insights into circumstances where some new web capabilities don’t work as expected in the interest of usability, security and privacy.

Read it

Scroll-Kaiju

Really cool horizontal scroll demo by Tom Miller.

Check it out

Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property

Bramus looks at the new scrollbar-gutter CSS property and shows how to use it.

Read it

From Our Blog

Layout with Reveal Animations and Content Preview

Some experimental reveal animations on typographic elements as repeating pattern for a website design.

Check it out

The post Collective #672 appeared first on Codrops.

June 24, 2021

Collective #667

Inspirational Website of the Week: Sandland Sleep

A lovely color theme with lots of type playfulness. Our pick this week.

Get inspired

Demystifying styled-components

Josh W Comeau explains how styled components work under the hood by building a mini-clone.

Read it

Towards a better responsiveness metric

Learn about our thoughts on measuring responsiveness and give the web.dev team some feedback.

Read it

Setting up a Decentralised Website (ENS + IPFS = dWeb)

Ire Aderinokun’s introduction to ENS names and the concept of decentralized websites.

Read it

Perfect Tooltips With CSS Clipping and Masking

Louis Hoebregts shows how to do use CSS Clipping and Masking to create awesome tooltips.

Read it

Building Generative Grid Layouts With Quadtrees

Learn to create harmonious generative grids based on random numbers, source images, user input, and more. By George Francis.

Read it

A Complete Guide To Accessibility Tooling

Nic Chan looks into different kinds of tools to help you streamline your accessibility testing process.

Read it

React Architecture: How to Structure and Organize a React Application

An opinionated guide to setting up the architecture for a new React application by Tania Rascia.

Read it

Benchmarking JavaScript Memory Usage

Tim Kadlec on the mystery and challenges of memory usage on the web.

Read it

Custom Scrollbars In CSS

An article by Ahmad Shadeed where you’ll learn about the old and new way to style custom scrollbars in CSS.

Read it

Asynchronous Design Critique: Giving Feedback

Erin Casali on the advantages of asynchronous feedback to collaboratively improving designs.

Read it

Beat Burger

A really cool playable burger demo by Steve Gardner.

Check it out

Concentric Circle Spinner

A cool spinner made only with divs, some border tricks, and one CSS animation.

Check it out

How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji

Preethi shows how to create CSS charts with interesting shapes.

Read it

GitHub Issues

With the new GitHub Issues you can break issues into tasks, track relationships, add custom fields, and have conversations.

Check it out

Bear plus snowflake equals polar bear

A super interesting article on byte size of emojis by Andy Salerno.

Read it

Optical size, the hidden superpower of variable fonts

Learn about the hidden superpower of variable fonts in this article by Roel Nieskens.

Read it

A 3D Hover Effect Using CSS Transforms

A tutorial on creating a 3D hover interaction with JavaScript and CSS.

Read it

OMG, SVG Favicons FTW!

Austin Gil explores the fun new world of SVG favicons.

Read it

From Our Blog

Drawing Graphics with the CSS Paint API

A practical introduction to the CSS Paint API with hands-on code examples including particles, noise buttons and curvy dividers.

Read it

From Our Blog

Inline to Menu Link Animation

An experimental inline-to-menu-link animation based on a concept by Matthew Hall.

Check it out

The post Collective #667 appeared first on Codrops.

April 22, 2021

Collective #658

Inspirational Website of the Week: Jonas Reymondin

An amazing portfolio that captures Jonas Reymondin’s talent in a perfect way.

Get inspired

Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling

A brilliant article by Jhey Tompkins on “perfect” infinite scrollling and maniputaling time with GSAP.

Read it

How I Built my Blog using MDX, Next.js, and React

An in-depth look at the technical stack behind Josh W Comeau’s blog.

Check it out

Spline Tutorial – Learn How to Create 3D Web Experiences

A very good tutorial by Jakub Duks on how to create amazing 3D web experiences with Spline, the 3D design tool. Check out the demo.

Check it out

Awesome-selfhosted

A list of free software network services and web applications which can be hosted on your own servers.

Check it out

Content-aware image resizing in JavaScript

A JavaScript implementation of the Seam Carving algorithm for content-aware image resizing and objects removal. By Oleksii Trekhleb.

Read it

Scrolling Microinteraction #CodePenChallenge

A supercool scroll animation made by Ryan Mulligan.

Check it out

Identify and Extract Pseudo-Element Selectors from built-in HTML Elements using DevTools

Bramus shows how to get to pseudo-elements of complex elements using DevTools.

Read it

Building a Database Driven Eleventy Site

Learn how to use a database (MySQL) to drive content for an Eleventy site in this tutorial by Raymond Camden.

Read it

Hwoa-rang-gl

A Lightweight WebGL library written in Typescript. By Georgi Nikoloff.

Check it out

Working around the viewport-based fluid typography bug in Safari

Sara Soueidan’s writeup of a Safari bug and the current possible work-around(s).

Read it

Am I FLoCed?

This page will check whether Google Chrome’s experimental new ad-targeting technology is enabled in your browser. Read more about it in this article.

Check it out

Kallithea

Kallithea, a free software source code management system supporting two leading version control systems, Mercurial and Git.

Check it out

Una Kravets shares the latest flexbox debugging features in Chrome DevTools.

Check it out

Data Visualization Guide

A CC-licensed design guide for presentations, reports, and dashboards.

Check it out

Trassel

A beautiful scroll demo by Hakim El Hattab.

Check it out

Building React + Vue support for Tailwind UI – Tailwind CSS

Adam Wathan shares some of the behind-the-scenes efforts that have gone into building React and Vue support for Tailwind UI.

Read it

CSS 3D Print Shop

An incredible CSS printer made by Jhey.

Check it out

Tying scroll offset to shaders

An old demo with Codesandbox by Paul Henschel.

Check it out

The complete guide to working with strings in modern JavaScript

Everything you need to know about creating, manipulating and comparing strings in JavaScript.

Read it

CPC Scrolling with Three.js & GSAP

A very interesting scroll demo based on Jhey’s infinite scroll solution mentioned earlier. By Shunya Koide.

Check it out

From Our Blog

Text Outline Animation with Three.js

Learn how to code the text outline effect seen on cornrevolution.com using Three.js with some GLSL.

Check it out

From Our Blog

Magnetic 3D Grid Interaction with Content Preview

A grid layout with a magnetic 3D interaction effect and a content preview animation.

Check it out

The post Collective #658 appeared first on Codrops.

March 18, 2021

Collective #653

Inspirational Website of the Week: Bridge Tour

A beautiful interactive visual narrative with a slick scroll experience.

Get inspired

Debugging layout shifts

A very informative article by Katie Hempenius on how to identify and fix layout shifts.

Read it

Aladino – your magic WebGL carpet

Aladino is a tiny, dependency-free JavaScript library that allows to enhance your site using “shader effects” with progressive enhancement and accessibility in mind. By Luigi De Rosa.

Check it out

Rethinking the JavaScript ternary operator

An article by James Sinclair where he takes a very close look at ternaries and if-statements.

Read it

Gorillas’ nav: a case study

An article about everything that went into the navigation of the Gorillas website, from accessibility to behavior to design. By Kitty Giraudel.

Read it

Haikei

A web-based design tool to generate unique SVG design assets for websites, social media, blog posts, desktop and mobile wallpapers, posters, and more.

Check it out

Creating Patterns With SVG Filters

Learn how to use SVG filters in such a way to make great looking patterns in this article by Bence Szabó.

Read it

Creative Code algorithms & techniques

A fantastic visual overview of creative coding techniques and algorithms compiled by Raphaël de Courville
and Taru Muhonen.

Check it out

100 underline/overlay animations

Temani Afif spoils us with an extensive collection of hover animations for menu items and links.

Check it out

Writex.io

Writex.io is an online editor offering lots of possibilities and a customized writing experience.

Check it out

Free Font: Brique

A wide serif display font designed by Henta Zakharia.

Check it out

Practical accessibility, part 1: Markup semantics & ARIA

Maggie Wachs shares this first part of an invaluable list that “when followed ensures a solidly accessible and usable experience”.

Read it

CSS Generators

A short series of posts that aims to highlight some of the useful tools and techniques for developers and designers. This one is about CSS Generators. By Iris Lješnjanin.

Check it out

Charts.css

Charts.css is a modern CSS framework that uses CSS utility classes to style HTML elements as charts.

Check it out

smoothstep.io

Smoothstep.io is a toolkit for building animations in the WebGL Shader language.

Check it out

Fluid Space Calculator

Using the same base values from the fluid type calculator, this tool helps you to create a related fluid space system for responsive designs.

Check it out

Font Follows Feeling – A brief type classification

An article and video that will give you a broad overview of how to categorize typefaces to figure out what kind or moods they can evoke and for what sorts of text they are suited.

Check it out

Free Font: SpaceType

A fantastic type project by Filip Starý.

Check it out

Conditional animations with CSS properties

Christian Heilmann shows how to use a custom property to avoid repeating the settings when using prefers-reduced-motion media queries.

Read it

How can I improve this GSAP particle animation code?

A GSAP forum thread where you can learn all about animating particles.

Check it out

F****** user interface design, I swear

A gentle reminder by Mark Dominus that obvious things should be considered when designing a UI

Read it

Manim

Manim is an animation engine for explanatory math videos. It’s used to create precise animations programmatically, as seen in the videos at 3Blue1Brown. There’s also a community edition which is updated more frequently.

Check it out

From Our Blog

Tropical Particles Rain Animation with Three.js

A WebGL particle rain animation resulting in an interesting image effect made with Three.js.

Check it out

The post Collective #653 appeared first on Codrops.

February 25, 2021

Collective #650

Inspirational Website of the Week: Léonard – Inventive Agency

Creative and unique with wonderful typography and soft effects. Our pick this week.

Get inspired

Annual Awards 2020

Find out who 2020’s best designers, developers, studios and agencies are.

Check it out

Create Responsive Image Effects With CSS Gradients And aspect-ratio

Stephanie Eckles explains how to use the new `aspect-ratio` property in combination with `object-fit` in order to maintain the aspect ratio of images across related components.

Read it

The Future of CSS: Scroll-Linked Animations with @scroll-timeline

Bramus experiments with the upcoming Scroll-linked Animations Specification that defines a way for creating animations that are linked to a scroll offset of a scroll container.

Read it

Blobmixer

A fantastic toy for creating and sharing 3D blobs.

Check it out

SVG Repo

Search more than 300.000 mono or multi color vectors for commercial use.

Check it out

What the heck, z-index??

Josh W Comeau explores stacking contexts, one of the most misunderstood mechanisms in CSS.

Read it

Getting Deep into Shadows

A great article by Rob O’Leary where he shares many interesting things about shadows.

Read it

Diving into the ::before and ::after Pseudo-Elements

An in-depth look at pseudo elements and how to use them to solve interesting CSS problems.

Check it out

Symphosizer

A really cool sound activated typographic instrument.

Check it out

Streams — The definitive guide

Learn how to use readable, writable, and transform streams with the Streams API. By Thomas Steiner.

Read it

Building a ‘Table Of Contents’ with active indicator using JavaScript Intersection Observers

A tutorial by Ben Frain that covers a modern way of automatically creating a table of contents for a blog post that updates with a ‘current position’ indicator.

Read it

Debugging layout repaint issues triggered by CSS Transition

Dzhavat Ushev shares some valuable insight on a repaint issue caused by a hover transition.

Read it

SVG: The Good, the Bad and the Ugly

A very interesting article about SVG, what its problems are and how a better solution would look like.

Read it

Ray.so

Turn your code into beautiful images. Choose from a range of syntax colors, hide or show the background, and toggle between a dark and light window.

Check it out

Hiding Content Responsibly

Hugo Giraudel discusses all the ways to hide something, be it through HTML or CSS, and when to use which.

Read it

Veloren

Veloren is a multiplayer voxel RPG written in Rust. The game is in an early stage of development, but is playable.

Check it out

State of Design 2021

1,000 designers shared how they work, what they value, and what kinds of challenges they’re facing.

Check it out

How to Create a Diverging Bar Chart with a JavaScript Charting Library

A tutorial by Shachee Swadia that will teach you how to create an interactive diverging bar chart.

Read it

Experience Japan Pictograms

A novel set of visual symbols developed for people of all cultures and ages to enhance their tourism experience in Japan.

Check it out

Maximally optimizing image loading for the web in 2021

In case you missed it: Learn 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.

Read it

From Our Blog

Creating an Infinite Circular Gallery using WebGL with OGL and GLSL Shaders

A tutorial explaining how to build an infinite circular gallery that can be dragged and scrolled using WebGL with OGL and GLSL Shaders.

Check it out

The post Collective #650 appeared first on Codrops.

December 17, 2020

Collective #641

Inspirational Website of the Week: ChungiYoo

A bright mix of fine artistry and playfulness, the website of Chungi Yoo shines with lovely details. Yet another masterpiece by Zhenya Rynzhuk. Our pick this week.

Get inspired

Codrops Collective Searcher

David de los Santos Boix created this fantastic search app for our Codrops Collective. Thank you, David!

Check it out

Blob Opera

A mind-blowing machine learning experiment by David Li where you can create your own opera inspired song.

Check it out

Scrollytelling with React

Varun Vachhar explains how he built a React and Intersection Observer based solution for Scrollytelling.

Read it

Cross-browser paint worklets and Houdini.how

Learn how to implement cross-browser Houdini Paint API’s and explore a world of Houdini worklets with Houdini.how.

Read it

Welcome Yari: MDN Web Docs has a new platform

Read all about MDN Web Docs’ new platform (codenamed Yari) which finally launched.

Read it

Book of Flowers

Aristide Benoist and Zhenya Rynzhuk are cooking a superb interactive project. It’s public work in progress so that everybody can follow their journey.

Check it out

Cameras and Lenses

Bartosz Ciechanowski explains how cameras and the lenses work and how adjusting a few tunable parameters can produce fairly different results.

Check it out

Tiny-Swiper

A JavaScript carousel powered by plugins with a native-like experience. It has zero dependencies and is written in TypeScript.

Check it out

Case Study: lynnandtonic.com 2020 refresh

A wonderful case study by Lynn Fisher with thoughts and a look at the prrocess for the lynnandtonic.com 2020 redesign.

Read it

Meow Mart

A super stylish game by Mailchimp.

Check it out

366 Cans Challenge by Studio Blackthorns

A can a day in 2020. This beverage challenge is a celebration of Studio Blackthorns’ 10th year as a strategic creative consultancy.

Check it out

What Makes CSS Hard To Master

CSS may appear easy at first, but it isn’t. Find out why in this article by Tim Severien.

Read it

EStimator.dev

Find out how much turning on modern JS could save with this handy calculator.

Check it out

Introducing Cash By Cash App

A really cool 3D presentation of Cash App’s latest collection.

Check it out

Implementing critical CSS, from CMS to CLS

Erwin Hofman shares his personal journey on critical CSS.

Read it

CSS Individual Transform Properties

Learn about the advantages of composing individual transform properties which will soon be supported in modern browsers.

Read it

Are your Anchor Links Accessible?

Amber Wilson demonstrates how to make sure that anchor links are accessible.

Read it

Deep dive into Rome: Linting, compiling, and bundling

A deep dive into the Rome toolchain, with some examples of how it performs against the most common tasks.

Read it

CSS paint API: Being predictably random

Jake Archibald shows how to do some random CSS using the CSS Paint API.

Read it

user-scalable=no and suppressing zoom suppression

Peter-Paul Koch on why suppressing user zoom is an awful idea and the current state of its “support”.

Read it

Sticky CSS Grid Items

Melanie Richards explains how to get position sticky working on a grid item without setting a hacky height.

Read it

Pantone Color of the Year 2021

Announcing the Pantone Color of the Year 2021 PANTONE 17-5104 Ultimate Gray + PANTONE 13-0647 Illuminating.

Check it out

How to Create Animated Cards with WebGL and Three.js

Johnny Simpson explains how to pull off a cool card effect.

Read it

2020 Tools Survey Results

See the most popular tools used by over 4,000 designers based on this annual survey.

Check it out

Handling Short And Long Content In CSS

An in-depth article on how to handle short and long content in CSS.

Read it

Centering in CSS

Follow 5 centering techniques as they go through a series of tests to see which one is the most resilient to change. By Adam Argyle.

Read it

Tilting Maze game

Hunor Marton Borbely made this cool little maze game.

Check it out

From Our Blog

Coding a 3D Lines Animation with Three.js

In this coding session you’ll learn how to use Three’s DepthTexture to create some animated 3D lines.

Check it out

The post Collective #641 appeared first on Codrops.

December 10, 2020

Collective #640

Inspirational Website of the Week: Vrrb

An elegant and clean design with beautiful details and some creative animations. Our pick this week.

Get inspired

50 Projects in 50 Days

A fantastic repo by Brad Traversy with 50+ mini web projects using HTML, CSS and JavaScript.

Check it out

Moonbridge

A simple and fun way to create your own WebGL experiment.

Check it out

The 2020 Web Almanac

The Web Almanac is an annual state of the web report combining the expertise of the web community with the data and trends of the HTTP Archive.

Check it out

Christmas Cannon

A super fun Christmas demo made by Steve Gardner.

Check it out

Kinetic Type Tutorial (Github Universe 2020)

A tutorial by Mario Carrillo on how to create the kinetic type for Github Universe.

Check it out

The Import On Interaction Pattern

An article by Addy Osmani on lazy-loading non-critical resources when it’s required by user interaction.

Read it

The Rules of Margin Collapse

Josh W Comeau puts an end to the mystery of collapsing margins and explains everything you need to know to not get caught by surprise anymore.

Read it

Introduction to Spline

If you got excited about Spline, you’ll find this tutorial very useful.

Watch it

Why I Love Tailwind

Max Stoiber shares why he loves Tailwind and explains how to avoid the downsides of atomic CSS.

Read it

Alt vs Figcaption

Elaina Natario explains alt and figcaption, their differences and how to use them.

Read it

Animated SVG Links

Some super stylish line animations for links by Adam Kuhn.

Check it out

CSS Scroll Snap

Learn why and how to use CSS scroll snap in this article by Ahmad Shadeed.

Check it out

Valtio Game

A demo that shows how to create a simple game with Valtio, a proxy-state library for React.

Check it out

Style your readme using CSS with this simple trick

A gem from some months ago: Some wicked CSS trickery by Sindre Sorhus.

Check it out

Accessible icon links

Hugo Giraudel shows how to make icon links accessible in this article.

Read it

Human performance metrics

A very insightful article by Gilles Dubuc on how web performance perception was measured at Wikipedia.

Read it

What Can You Put in a CSS Variable?

An article by Will Boyd on what you can use as CSS variable value.

Read it

GitHub: Where the world builds software

The new landing page of GitHub shines with an interactive globe.

Check it out

Typography Principles

A really nice scroll experience with a wonderful design explaining typographic principles.

Check it out

From Our Blog

Horizontal Smooth Scroll Layouts

Some ideas for horizontal smooth scrolling layouts powered by Locomotive Scroll.

Check it out

The post Collective #640 appeared first on Codrops.

November 30, 2020

Collective #637

Building TakeNote, a Notes App for Developers With GitHub Sync

Tania Rascia shares how she built TakeNote, a clutter-free web-based notes app for developers.

Check it out

Boop!

A tutorial on how to create a brilliant React hover animation effect with React Spring.

Read it

Sick of the stupid jokes? Write your own arbitrary-precision JavaScript math library

James Sinclair shows how to write your own custom JavaScript math library tailored to your specific needs.

Read it

Native Aspect Ratio Boxes in CSS thanks to aspect-ratio

Learn all about the new “aspect-ratio” property and how to use it.

Read it

Infinite Bad Guy

Infinite Bad Guy is an AI experiment that uses machine learning to seamlessly align thousands of covers of Billie Eilish’s “Bad Guy” into an infinite music video.

Check it out