CSS Articles by Temani Afif

Do you need a Tooltip or a Speech Bubble?

Modern CSS Tooltips And Speech Bubbles (Part 1) Read the full article online

Creating Flower Shapes using CSS Mask & Trigonometric Functions Read the full article online

CSS Shapes: The Triangle Read the full article online

CSS Tricks to add 3D Effects to your Text Read the full article online

The Complex But Awesome CSS border-image Property Read the full article online

CSS Responsive Multi-Line Ribbon Shapes (Part 2) Read the full article online

CSS Responsive Multi-Line Ribbon Shapes (Part 1) Read the full article online

I have made 100+ CSS-only Ribbon Shapes | The Perfect Collection 🎀 Read the full article online

How to create a CSS-only infinite scroll animation Read the full article online

Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 2) Read the full article online

Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 1) Read the full article online

How to Create CSS Ribbon Shapes with a Single Element Read the full article online

CSS Shapes: The Ribbon Read the full article online

Revealing Images With CSS Mask Animations Read the full article online

css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯) Read the full article online

How To Define An Array Of Colors With CSS Read the full article online

CSS effects on images II Read the full article online

Shines, Perspective, And Rotations: Fancy CSS 3D Effects For Images Read the full article online

One-click and you have the best CSS Pattern that matches your preference.

In this article, we’ll explore some CSS tricks that allow us to create a hover animation for revealing our images.

In this article, we will use CSS Grid to build some common layouts.

After the CSS Loaders and the CSS Underline/Overlay animations, I am back with another big collection.

In this article, I’ll show how to use modern CSS techniques to create an eye-catching, custom range slider with nothing but the native HTML input element.

Create a heart shape using modern CSS tricks.

In this article, we are going to build CSS Shapes!

In this article, we are going to build a simple but cool reveal animation that you can apply to your text.

Read the full article online

In this article, we will create an accordion using CSS.

in this article, we will tackle another famous component: the breadcrumb navigation.

It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors?

In this article, we will build a component commonly used everywhere especially when it comes to multi-step forms: The stepper component.

In this article, we will cover a famous effect used in e-commerce websites: Zooming over images.

Read the full article online

In this article, we will cover different ways of creating a custom cursor using only CSS.

This time around, we’re diving into the third dimension.

In the last article, we made a pretty cool little slider (or “carousel” if that’s what you prefer) that rotates in a circular direction.

In this article, we are going to build a responsive sidebar menu.

Through a little series of articles, we are going to explore some fancy and uncommon CSS-only sliders.

Read the full article online

After Part 1 and Part 2, I am back with a third article to explore more fancy shapes.

We’ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the element.

Welcome to Part 2 of this three-part series!

As the title says, we are going to decorate images!

You must have seen those sliders of images that have an infinite loop animation.

The wave is probably one of the most difficult shapes to make in CSS.

I recently discovered the joy of creating CSS-only games.

In this article, we will study two common web components: Tooltip and Speech Bubble.

Ready for the second round?

In a previous article, I looked at CSS Grid’s ability to create complex layouts using its auto-placement powers.