博客 / 列表

Temani Afif - Shines, Perspective, And Rotations: Fancy CSS 3D Effects For Images

We all agree that 3D effects are cool, right? I think so, especially when they are combined with subtle animations. In this article, we will explore a few CSS tricks to create stunning 3D effects!

animation , Techniques , Css , Design

Temani Afif - How To Define An Array Of Colors With CSS

CSS is mainly known as a language based on a set of property-value pairs. You select an element, define the properties, and write styles for it. There’s nothing wrong with this approach, but CSS has

Techniques , Css , Design

Temani Afif - Revealing Images With CSS Mask Animations

In a previous article, we explored fancy hover effects for images that involve shines, rotations, and 3D perspectives. We are going to continue playing with images, but this time, we are making anim

Techniques , Css , Design

Temani Afif - Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 1)

In a previous article on CSS-Tricks, I demonstrated how to create a fancy hover effect where an avatar pops out of a circle on hover. The challenge was to make such an effect using only the img tag.

Techniques , Css , Design

Temani Afif - Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 2)

The last time we met, I demonstrated how newer CSS features — particularly trigonometric functions — can be leveraged to accomplish a “pop-out” hover effect. This is what we made together: See t

Techniques , Css , Design

Temani Afif - CSS Responsive Multi-Line Ribbon Shapes (Part 1)

Back in the early 2010s, it was nearly impossible to avoid ribbon shapes in web designs. It was actually back in 2010 that Chris Coyier shared a CSS snippet that I am sure has been used thousands of

Techniques , Css , Design

Temani Afif - CSS Responsive Multi-Line Ribbon Shapes (Part 2)

In my previous article, we tackled ribbons in CSS. The idea was to create a classic ribbon pattern using a single element and values that allow it to adapt to however much content it contains. We es

Techniques , Css , Design

Temani Afif - The Complex But Awesome CSS border-image Property

The border-image property is nothing new. Even deprecated Internet Explorer supports it, so you know we’re treading well-charted territory. At the same time, it’s not exactly one of those properties

Techniques , Css , Design

Temani Afif - Modern CSS Tooltips And Speech Bubbles (Part 1)

In a previous article, we explored ribbon shapes and different ways to approach them using clever combinations of CSS gradients and clip-path(). This time, I’d like to explore another shape, one tha

Techniques , Css , Design

Temani Afif - Modern CSS Tooltips And Speech Bubbles (Part 2)

I hope you were able to spend time getting familiar with the techniques we used to create tooltips in Part 1 of this quick two-parter. Together, we were able to create a flexible tooltip pattern tha

Techniques , Css , Design

Temani Afif - Sliding 3D Image Frames In CSS

In a previous article, we played with CSS masks to create cool hover effects where the main challenge was to rely only on the img tag as our markup. In this article, pick up where we left off by “re

Techniques , Css , Design

Temani Afif - The Modern Guide For Making CSS Shapes

You have for sure googled “how to create [shape_name] with CSS” at least once in your front-end career if it’s not something you already have bookmarked. And the number of articles and demos you wil

Guides , Tools , Css