Collective #627
15.10.2020
Butter Slider * :focus-visible Is Here * PureCSS Character * ZzFXM * Developing For The Semantic Web
The post Collective #627 appeared first on Codrops
Scroll Animations for Image Grids
14.10.2020
Some ideas for scroll animations for image grids powered by Locomotive Scroll.
The post Scroll Animations for Image Grids appeared first on Codrops
How to Create a Realistic Motion Blur with CSS Transitions
14.10.2020
Before we delve into making a realistic motion blur in CSS, it’s worth doing a quick dive into what motion blur is, so we can have a better idea of what we’re trying to reproduce.
Have you ever taken a photo of something moving quickly, especially under low light, and it turned into a blurry...
Let’s Create Our Own Authentication API with Nodejs and GraphQL
13.10.2020
Authentication is one of the most challenging tasks for developers just starting with GraphQL. There are a lot of technical considerations, including what ORM would be easy to set up, how to generate secure tokens and hash passwords, and even what HTTP library to use and how to use it. 
In...
Netlify Edge Handlers
13.10.2020
Some very cool news from Netlify: Edge Handlers are in Early Access (request it here). I think these couple of lines of code do a great job in explaining what an Edge Handler is:
export function onRequest(event) {
console.log(`Incoming request for ${event.request.url}`);
...
Run Gulp as You Open a VS Code Project
13.10.2020
When I open my local project for this very site, there is a 100% chance that I need to run this command before anything else: gulp. I set that up fresh less than a year ago so I’m on the latest-and-greatest stuff and have my workflow just how I like it. I did a few more tweaks a few months...
How to Recreate the Ripple Effect of Material Design Buttons
12.10.2020
When I first discovered Material Design, I was particularly inspired by its button component. It uses a ripple effect to give users feedback in a simple, elegant way.
How does this effect work? Material Design’s buttons don’t just sport a neat ripple animation, but the animation also...
Coding the Mouse Particle Effect from Mark Appleby’s Website
12.10.2020
Learn how to create the mouse particle effect from Mark Appleby's website in this ALL YOUR HTML episode.
The post Coding the Mouse Particle Effect from Mark Appleby’s Website appeared first on Codrops
Sports Data for Developers: SportdataAPI (Sponsored)
12.10.2020
Most of the side projects I consider starting revolve around sports, since I’m a huge sports fan. I spend my Saturdays watching soccer, Sundays spent watching soccer and NFL, and of course the mid-week Champions League and Europa League matches. One problem I’ve always had is not being...
Animating Number Counters
9.10.2020
Number animation, as in, imagine a number changing from 1 to 2, then 2 to 3, then 3 to 4, etc. over a specified time. Like a counter, except controlled by the same kind of animation that we use for other design animation on the web. This could be useful when designing something like a dashboard,...
WDRL — Edition 284: AVIF, Lots of CSS and our own Soil.
9.10.2020
Hey,
“You can run-away, run-away, run-away… you gotta face this… time is running fast…” — Snoop Lion in his song ‘Rebel Way’
We can apply this quote to a lot of matters in our lives right now. Our time to do something for ourselves, for our relatives, our animals, our planet is running fast....
Balancing on a pivot with Flexbox
8.10.2020
Let me show you a way I recently discovered to center a bunch of elements around what I call the pivot. I promise you that funky HTML is out of the question and you won’t need to know any bleeding-edge CSS to get the job done.
I’m big on word games, so I recently re-imagined the main menu...