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

Articles Tagged
mask

29 Articles
{
,

}
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 …

Avatar of Temani Afif
Temani Afif on Feb 3, 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 …

Avatar of Temani Afif
Temani Afif on Dec 2, 2022 (Updated on Jan 12, 2023)
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 …

Avatar of Temani Afif
Temani Afif on 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 …

Avatar of Temani Afif
Temani Afif on 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? …

Avatar of Temani Afif
Temani Afif on 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 …

Avatar of Temani Afif
Temani Afif on Sep 26, 2022 (Updated on Mar 29, 2024)
Direct link to the article How I Made a Pure CSS Puzzle Game
checkbox hack game grid mask radial-gradient

How I Made a Pure CSS Puzzle Game

I recently discovered the joy of creating CSS-only games. It’s always fascinating how HTML and CSS are capable of handling the logic of an entire online game, so I had to try it! Such games usually rely on the ol’ …

Avatar of Temani Afif
Temani Afif on Sep 9, 2022
Direct link to the article CSS Grid and Custom Shapes, Part 2
clip-path css shapes grid hover mask

CSS Grid and Custom Shapes, Part 2

Alright, so the last time we checked in, we were using CSS Grid and combining them with CSS clip-path and mask techniques to create grids with fancy shapes.

Here’s just one of the fantastic grids we made together:…

Avatar of Temani Afif
Temani Afif on Aug 22, 2022 (Updated on Nov 11, 2022)
Direct link to the article CSS Grid and Custom Shapes, Part 1
clip-path css shapes grid implicit grid mask

CSS Grid and Custom Shapes, Part 1

In a previous article, I looked at CSS Grid’s ability to create complex layouts using its auto-placement powers. I took that one step further in another article that added a zooming hover effect to images in a grid layout…

Avatar of Temani Afif
Temani Afif on Aug 15, 2022 (Updated on Nov 11, 2022)
Direct link to the article Single Element Loaders: Going 3D!
3d clip-path gradients loader mask

Single Element Loaders: Going 3D!

For this fourth and final article of our little series on single-element loaders, we are going to explore 3D patterns. When creating a 3D element, it’s hard to imagine that just one HTML element is enough to simulate something like all six faces of a cube. But  maybe we can get away …

Avatar of Temani Afif
Temani Afif on Jul 1, 2022 (Updated on Aug 27, 2023)
Direct link to the article Single Element Loaders: The Dots
background-position gradients loader mask

Single Element Loaders: The Dots

We’re looking at loaders in this series. More than that, we’re breaking down some common loader patterns and how to re-create them with nothing more than a single div. So far, we’ve picked apart the classic spinning loader. Now, …

Avatar of Temani Afif
Temani Afif on Jun 17, 2022 (Updated on Feb 15, 2024)
  • 1
  • 2
  • 3
  • 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