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

Author Temani Afif

8 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-challenges.com, css-generators.com, css-tip.com, css-pattern.com, and many more!

Find Temani Elsewhere:
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…