CSS

24 Articles

Jun 21, 2023

Building a React Number Ticker

Animate Between Two Numbers with React hooks and CSS

• React
• CSS
• Animation

Jan 31, 2023

Building a React Confetti Component

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

• React
• CSS
• Animation

Jun 3, 2022

Building Dynamic Icons With CSS Animation

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

• SVG
• CSS
• Animation
• Figma

Dec 8, 2021

How to Build a Story Layout

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

• React
• CSS
• Javascript

Oct 18, 2021

How to Build a Color Palette Component

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

• React
• Javascript
• CSS

Sep 8, 2021

Building a Segmented Control Component

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

• React
• React Hooks
• CSS

Jun 20, 2021

A 3D Hover Effect Using CSS Transforms

Creating a hover interaction with Javascript and CSS.

• CSS
• CSS Animation
• Javascript

May 27, 2021

How to Build an Image Comparison Slider

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

• React
• CSS
• Javascript

Mar 7, 2021

How to Listen for CSS Events in Javascript

A guide to working with CSS animation and transition events.

• CSS
• CSS Animation
• Javascript

Feb 20, 2021

Resizable Tables with React and CSS Grid

Learn how to add resizing to your HTML tables.

• React
• CSS

Jan 31, 2021

Creating an Animated Counter Button

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

• CSS
• Animation
• React

Dec 20, 2020

Reducing Motion in Animations

Learn how to implement accessible animations in CSS and Javascript.

• Accessibility
• CSS
• Javascript
• React

Nov 15, 2020

Building a Dark Mode Theme Toggle

Learn how to build an interesting dark mode animation.

• React
• CSS
• CSS Variables
• Javascript

Nov 1, 2020

How to Build an Expandable Comment Box

Recreating the Medium comment box from scratch using React Hooks.

• React
• React Hooks
• CSS

Oct 4, 2020

CSS Text Effects - Five Minimal Examples

Exploring lightweight CSS text clipping and masking effects.

• CSS

Sep 2, 2020

Building a Vertical Carousel Component in React

We'll learn how to build an infinite carousel using sentences as slides.

• React
• CSS
• Animation

Aug 3, 2020

Recreating the Medium Applause Button

Learn how to create the Medium applause button in React.

• React
• React Hooks
• CSS
• Animation

Jul 5, 2020

Flexbox Bottom Aligned Elements

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

• CSS

Jun 10, 2020

Building a React Card Carousel Component

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

• React
• CSS

May 20, 2020

Making Progress With Progress Indicators: Part 2

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

• React
• SVG
• CSS
• Animation

May 15, 2020

Making Progress With Progress Indicators: Part 1

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

• React
• CSS
• CSS Variables

May 13, 2020

Building a Dropdown Menu Component With React Hooks

We'll create a dropdown menu using React Hooks.

• React
• React Hooks
• CSS

May 12, 2020

How to Build a Skeleton Loading Placeholder

Explore some basic strategies for creating skeleton loading placeholders.

• CSS
• HTML

May 9, 2020

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!

• CSS
• HTML