Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search
Articles by

Temani Afif

CSS Loaders — CSS Shape — CSS Generators — CSS Tip — CSS Pattern — CSS Challenges

@ChallengesCss · support.temani-afif.com

Direct link to the article Better CSS Shapes Using shape() — Part 4: Close and Move
art clip-path CSS functions css shapes

Better CSS Shapes Using shape() — Part 4: Close and Move

The shape() function's close and move commands may not be ones you reach for often, but are incredibly useful for certain shapes.
Jul 7, 2025
Diagrammiong a rounded rectangular shape in three stages, first with sharp edges, then with points indicating where the curve control points are, then the completed shape.
Direct link to the article Better CSS Shapes Using shape() — Part 3: Curves
art clip-path CSS functions css shapes

Better CSS Shapes Using shape() — Part 3: Curves

This is the third article in a series about the CSS shape() function. We've covered drawing lines and arcs in previous articles and, this time, we look specifically at the curve command and how to use it for drawing complex shapes.
Jul 7, 2025
Three circular shapes in a single row, including a partial pie and two semi-circles, one with rounded edges.
Direct link to the article Better CSS Shapes Using shape() — Part 2: More on Arcs
art clip-path CSS functions css shapes

Better CSS Shapes Using shape() — Part 2: More on Arcs

This is the second part of a series that dives deep into the CSS shape() command, continuing with a more detailed look at the arc command.
Jul 7, 2025
Direct link to the article Better CSS Shapes Using shape() — Part 1: Lines and Arcs
art clip-path CSS functions css shapes

Better CSS Shapes Using shape() — Part 1: Lines and Arcs

This is the first part of a series that dives deep into the shape function, starting with shapes that use lines and arcs.
Jul 7, 2025
Direct link to the article A CSS-Only Star Rating Component and More! (Part 2)
forms Scroll Driven Animation

A CSS-Only Star Rating Component and More! (Part 2)

In this second article of a two-part series, Temani Afif demonstrates an alternative approach to creating the star rating component from the first article using experimental scroll-driven animations rather than using the border-image property.
Mar 7, 2025
Direct link to the article A CSS-Only Star Rating Component and More! (Part 1)
attributes borders forms

A CSS-Only Star Rating Component and More! (Part 1)

In this article, you'll learn how to make a full-on star rating component out of nothing but a single input element and vanilla CSS.
Mar 7, 2025
Direct link to the article Fancy Menu Navigation Using Anchor Positioning
anchor positioning Links & URLs

Fancy Menu Navigation Using Anchor Positioning

Anchor positioning can be great for little interactive effects — as Temani Afif shows off with this clever idea for a menu hover.
Jan 17, 2025
Direct link to the article CSS Tricks That Use Only One Gradient
gradients

CSS Tricks That Use Only One Gradient

CSS gradients have been so long that there’s no need to rehash what they are and how to use them. You have surely encountered them at some point in your front-end journey, and if you follow me, you also …

Mar 14, 2025
Direct link to the article Different Ways to Get CSS Gradient Shadows
box-shadow gradients shadow

Different Ways to Get CSS Gradient Shadows

It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors? There is no specific CSS property that does this (believe me, I’ve looked) and any blog post you find about …

Feb 10, 2023
  • 1
  • 2
  • 3
  • ...
  • 5
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top