← Back to FrontendMasters.com
Courses Learn Become a Member Guest Writing
RSS
/ BLOG
Author Archive for

Temani Afif

Post Thumbnail for Creating Blob Shapes using clip-path: shape()
BlobCSSShapes

Creating Blob Shapes using clip-path: shape()

By Temani Afif on May 19, 2025

Blobs! Gooey weird shapes you can fill with any background and even animate.

Post Thumbnail for Creating Flower Shapes using clip-path: shape()
CSSShapes

Creating Flower Shapes using clip-path: shape()

By Temani Afif on May 12, 2025

Use the `arc` command within the `shape()` function we can draw a line that follows a circle from one point to the next, controlling the direction.

Post Thumbnail for Custom progress element using the attr() function
attr()CSSprogress

Custom progress element using the attr() function

By Temani Afif on April 9, 2025

Now that we’re starting to be able to apply types (like `number`) to values of attributes we pull of HTML elements in CSS, doing interesting things with is easier.

Post Thumbnail for Full-Bleed Layout with Modern CSS
CSS

Full-Bleed Layout with Modern CSS

By Temani Afif on January 27, 2025

Just four declarations in CSS can handle this nicely, while avoiding the vertical scrollbar issue.

Post Thumbnail for Custom Progress Element Using Anchor Positioning & Scroll-Driven Animations
CSSprogress

Custom Progress Element Using Anchor Positioning & Scroll-Driven Animations

By Temani Afif on November 13, 2024

A single HTML `progress` element can have quite an elaborate design with custom colors, a tooltip showing the active %, and even an entrance animation.

Post Thumbnail for Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations
AnchorCSSRangeScroll-Driven Animations

Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations

By Temani Afif on August 21, 2024

We’ll make some extremely stylized range sliders with simple semantic HTML and some very fresh CSS. You might be surprised how custom these things can get these days.

Post Thumbnail for How to Get the Width/Height of Any Element in Only CSS
CSSScroll-Driven Animations

How to Get the Width/Height of Any Element in Only CSS

By Temani Afif on July 25, 2024

Unlike JavaScript, there is no simple built-in method in CSS to access an element’s width and height. But using some (call it hacky) modern CSS techniques, we can get our hands on the number and even use it.

Post Thumbnail for How Keyboard Navigation Works in a CSS Game
CSSGameScroll-Driven Animations

How Keyboard Navigation Works in a CSS Game

By Temani Afif on July 8, 2024

The navigation in this game works with the arrow keys, which is made possible with scroll driven animations, faked collision detection, and maintaining state with CSS custom properties.

Post Thumbnail for Creating Wavy Circles with Fancy Animations in CSS
@propertyAnimationCSSMask

Creating Wavy Circles with Fancy Animations in CSS

By Temani Afif on March 15, 2024

In a previous article, we created flower-like shapes using modern CSS (mask, trigonometric functions, etc). This article is a follow-up where we will create a similar shape and also introduce some fancy animations. Here is a demo of what we are building. Hover the image to see the animation Cool right? If you check the […]

Post Thumbnail for Creating Flower Shapes using CSS Mask & Trigonometric Functions
CSSSCSSShapes

Creating Flower Shapes using CSS Mask & Trigonometric Functions

By Temani Afif on February 29, 2024

Creating unusual shapes is always a fun exercise and a good way to practice your CSS skills. One might argue that SVG is better for this job, but nowadays we have a lot of new CSS tricks that allow us to create shapes with a clean and optimized code. Through this two-article series, we will […]

Author

Temani Afif
Temani Afif
I'm a CSS addict and I love writing about my experiments. I am also the developer behind my CSS-related websites, such as css-generators.com, css-tip.com, css-loaders.com and many more!
Website GitHub Profile X Profile

Did you know?

Frontend Masters Donates to open source projects. $363,806 contributed to date.

See all 40+ open source project donations by Frontend Masters on Open Collective and thanks.dev.
  • Courses
  • Learn
  • Teachers
  • Guides
  • Blog
  • FAQ
  • Login
  • Join Now
  • RSS
Twitter LinkedIn Facebook Instagram RSS
Frontend Masters App on the Apple App Store Frontend Masters App on Google Play
Contact: support@frontendmasters.com
Frontend Masters is proudly made in Minneapolis, MN
©2024 Frontend Masters · Terms of Service · Privacy Policy