Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search
Articles by

Temani Afif

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

@ChallengesCss · support.temani-afif.com

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
Direct link to the article A Fancy Hover Effect For Your Avatar
gradients hover mask scale

A Fancy Hover Effect For Your Avatar

Do you know that kind of effect where someone’s head is poking through a circle or hole? The famous Porky Pig animation where he waves goodbye while popping out of a series of red rings is the perfect example, and …

Feb 3, 2023
Direct link to the article CSS Infinite 3D Sliders
3d carousel slider transform

CSS Infinite 3D Sliders

In this series, we’ve been making image sliders with nothing but HTML and CSS. The idea is that we can use the same markup but different CSS to get wildly different results, no matter how many images we toss …

Dec 16, 2022
Direct link to the article CSS Infinite Slider Flipping Through Polaroid Images
carousel css animation images slider z-index

CSS Infinite Slider Flipping Through Polaroid Images

In the last article, we made a pretty cool little slider (or “carousel” if that’s what you prefer) that rotates in a circular direction. This time we are going to make one that flips through a stack of Polaroid …

Dec 9, 2022 (Updated on Jan 12, 2023)
Direct link to the article CSS Infinite and Circular Rotating Image Slider
carousel css animation images mask slider

CSS Infinite and Circular Rotating Image Slider

Image sliders (also called carousels) are everywhere. There are a lot of CSS tricks to create the common slider where the images slide from left to right (or the opposite). It’s the same deal with the many JavaScript libraries out …

Dec 2, 2022 (Updated on Jan 12, 2023)
Direct link to the article Making Static Noise From a Weird CSS Gradient Bug
background-clip conic gradients gradients mix-blend-mode radial-gradient

Making Static Noise From a Weird CSS Gradient Bug

What I will be doing here is kind of an experiment to explore tricks that leverage a bug with the way CSS gradients handle sub-pixel rendering to create a static noise effect — like you might see on a TV with no signal.
Nov 18, 2022
Direct link to the article CSS Grid and Custom Shapes, Part 3
clip-path css shapes grid hover images

CSS Grid and Custom Shapes, Part 3

After Part 1 and Part 2, I am back with a third article to explore more fancy shapes. Like the previous articles, we are going to combine CSS Grid with clipping and masking to create fancy layouts for image …

Nov 11, 2022
Direct link to the article Fancy Image Decorations: Outlines and Complex Animations
clip-path gradients hover mask outline transition

Fancy Image Decorations: Outlines and Complex Animations

We’ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the <img> element. In this third and final piece, we are going to explore more techniques using the …

Oct 28, 2022 (Updated on Jun 19, 2023)
Direct link to the article Fancy Image Decorations: Masks and Advanced Hover Effects
clip-path gradients hover linear-gradient mask radial-gradient

Fancy Image Decorations: Masks and Advanced Hover Effects

Welcome to Part 2 of this three-part series! We are still decorating images without any extra elements and pseudo-elements. I hope you already took the time to digest Part 1 because we will continue working with a lot of gradients …

Oct 21, 2022 (Updated on Oct 28, 2022)
Direct link to the article Fancy Image Decorations: Single Element Magic
clip-path conic gradients hover images mask multiple backgrounds

Fancy Image Decorations: Single Element Magic

As the title says, we are going to decorate images! There’s a bunch of other articles out there that talk about this, but what we’re covering here is quite a bit different because it’s more of a challenge. The challenge? …

Oct 14, 2022 (Updated on Oct 28, 2022)
Direct link to the article How to Create Wavy Shapes & Patterns in CSS
mask multiple backgrounds radial-gradient

How to Create Wavy Shapes & Patterns in CSS

The wave is probably one of the most difficult shapes to make in CSS. We always try to approximate it with properties like border-radius and lots of magic numbers until we get something that feels kinda close. And that’s before …

Sep 26, 2022 (Updated on Mar 29, 2024)
  • 1
  • 2
  • 3
  • ...
  • 4
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

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