css

A collection of 35 posts

Building a Dynamic Background Effect

How to create a randomized, animated icon background for any content section.

How to Animate Borders in CSS

Different approaches for animating CSS borders in 2024.

Reacting with Emojis

Building a custom React hook to place emojis on any element.

What is CSS Motion Path?

Animating elements along a custom path has never been easier!

A Rotating Word Wheel Interaction

How to build a scroll-based rotating menu in React.

How to Build a Card Flip Animation

Learn how to apply CSS transforms and animations to playing cards

Dynamic Styling with CSS Variables

Learn the basics of CSS variables, also known as CSS custom properties

Animated Social Share Links

Learn how to build an animation for displaying social links using CSS

Nesting in CSS

A brief intro to the new CSS Nesting module

Building a React Number Ticker

Animate Between Two Numbers with React hooks and CSS

Building a React Confetti Component

Partying hard with React hooks, CSS and the js-confetti library.

Building Dynamic Icons With CSS Animation

Use the power of CSS animations to add joy to your icons.

Building a Heatmap Chart Component

Making a heatmap chart like those seen in Github or Google Analytics.

Adding Click Animations to Anything

Use React hooks and CSS variables to add animation effects.

How to Build a Story Layout

Create an image story layout like those seen in popular apps.

How to Build a Color Palette Component

Animating with flexbox, using the Javascript Clipboard API and more.

Building a Segmented Control Component

Use React hooks and CSS variables to create an animated segmented control.

A 3D Hover Effect Using CSS Transforms

Creating a hover interaction with Javascript and CSS.

How to Build an Image Comparison Slider

Using React hooks to build a before and after image comparison component.

How to Listen for CSS Events in Javascript

A guide to working with CSS animation and transition events.

Resizable Tables with React and CSS Grid

Learn how to add resizing to your HTML tables.

Creating an Animated Counter Button

A short guide to building an animated counter component with React hooks.

Reducing Motion in Animations

Learn how to implement accessible animations in CSS and Javascript.

Building a Dark Mode Theme Toggle

Learn how to build an interesting dark mode animation.

How to Build an Expandable Comment Box

Recreating the Medium comment box from scratch using React Hooks.

CSS Text Effects - Five Minimal Examples

Exploring lightweight CSS text clipping and masking effects.

Building a Vertical Carousel Component in React

Learn how to build an infinite carousel using sentences as slides.

Recreating the Medium Applause Button

Learn how to create the Medium applause button in React.

Flexbox Bottom Aligned Elements

We'll cover two ways of bottom aligning an anchor within a flexbox item.

Building a React Card Carousel Component

In this post we will explore creating a card carousel like the one seen on Stripe.com.

Making Progress With Progress Indicators: Part 2

Part two on building progress indicators. This time, using SVG animation.

Making Progress With Progress Indicators: Part 1

The first of a two part series exploring stepped progress indicators.

Building a Dropdown Menu Component With React Hooks

In this article, you'll create a dropdown menu using React Hooks.

How to Build a Skeleton Loading Placeholder

Explore some basic strategies for creating skeleton loading placeholders.

Recreating the iOS Control Center With CSS Grid

We'll create a clone of the iOS 13 control center layout using the power of CSS grid!