Skip to main content Jump to list of all articles Jump to all topics
Clear Search

Author Temani Afif

12 articles

Temani was a regular contributor at CSS-Tricks who wrote perhaps more articles than anyone who was not on staff. He loves experimenting with CSS and trying to find nifty ideas. He’s also the creator of many CSS-related websites, such as css-loaders.com, css-generators.com, css-tip.com, css-pattern.com, and many more!

Find Temani Elsewhere:
Temani Afif wrote

Sliding 3D Image Frames In CSS

Creating 3D effects in CSS isn’t an entirely new concept, but typical approaches use additional elements in the markup and pseudo-elements in the styles to pull it off. Temani Afif applies 3D effects and sliding transitions to a single <img> using clever CSS techniques that demonstrate advanced, modern styling practices. Read more…

Temani Afif wrote

Modern CSS Tooltips And Speech Bubbles (Part 2)

In Part 1 of this series, Temani Afif explored different CSS techniques to create tooltip shapes. The main challenge was to rely on a single element and create optimized code that could easily be controlled using CSS variables to update the size, shape, and position of the tail. In this second part, you are going explore more shapes. Read more…

Temani Afif wrote

Modern CSS Tooltips And Speech Bubbles (Part 1)

Tooltips are a very common pattern used in CSS for years. There are a lot of ways to approach tooltips in CSS, though some evoke headaches with all the magic numbers they require. In this article, Temani Afif presents modern techniques to create tooltips with the smallest amount of markup and the greatest amount of flexibility. Read more…

Temani Afif wrote

CSS Responsive Multi-Line Ribbon Shapes (Part 2)

In Part 1 of the series, Temani Afif demonstrated how creating ribbon patterns in CSS has evolved with the availability of new CSS features. In this second installment of this brief two-part series, we look at two additional ribbon variations that introduce techniques for masking a repeated background gradient in CSS. Read more…

Temani Afif wrote

CSS Responsive Multi-Line Ribbon Shapes (Part 1)

Ribbons have been used to accent designs for many years now. But, the way we approach them in CSS has evolved with the introduction of newer features. In this article, Temani Afif combines background and gradient tricks to create ribbon shapes in CSS that are not only responsive but support multi-line text and are easily adjustable with a few CSS variables. Read more…

Temani Afif wrote

Revealing Images With CSS Mask Animations

Let’s play with images and experiment with CSS masks. The idea is fairly simple: take a single <img> tag and harness the power of CSS to accomplish complex hover transitions. Through different demos, you will see how CSS masks combined with gradients allow us to create fancy effects — with efficient, reusable code. Read more…