Search
Frontend Masters — Boost
Courses Learn Become a Member
← Back to FrontendMasters.com
Author Archive for

Temani Afif

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

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.

See all 40+ open source project donations by Frontend Masters on Open Collective and thanks.dev.
Frontend Masters
  • 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