Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
clip-path

40 Articles
{
,

}
Direct link to the article Weaving One Element Over and Under Another Element
clip-path grid mask mix-blend-mode

Weaving One Element Over and Under Another Element

In this post, we’re going to use CSS superpowers to create a visual effect where two elements overlap and weave together. The epiphany for this design came during a short burst of spiritual inquisitiveness where I ended up at The …

Avatar of Preethi
Preethi on Oct 14, 2019
Direct link to the article Clipping, Clipping, and More Clipping!
clip-path clipping

Clipping, Clipping, and More Clipping!

There are so many things you can do with clipping paths. I’ve been exploring them for quite some time and have come up with different techniques and use cases for them — and I want to share my findings with …

Avatar of Mikael Ainalem
Mikael Ainalem on Oct 8, 2019
Direct link to the article The Many Ways to Link Up Shapes and Images with HTML and CSS
clip-path css shapes links SVG

The Many Ways to Link Up Shapes and Images with HTML and CSS

Different website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as …

Avatar of Bailey Jones
Bailey Jones on Oct 1, 2019 (Updated on Oct 10, 2019)
Direct link to the article Various Methods for Expanding a Box While Preserving the Border Radius
animation clip-path CSS scaling transform transition

Various Methods for Expanding a Box While Preserving the Border Radius

I’ve recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there’s a rectangle with rounded corners expanding in the back.…

Avatar of Ana Tudor
Ana Tudor on Sep 6, 2019 (Updated on Sep 9, 2019)
Direct link to the article A Glassy (and Classy) Text Effect
apple backdrop-filter clip-path

A Glassy (and Classy) Text Effect

The landing page for Apple Arcade has a cool effect where some “white” text has a sort of translucent effect. You can see some of the color of the background behind it through the text. It’s not like knockout text…

Avatar of Chris Coyier
Chris Coyier on Aug 29, 2019
Direct link to the article Animating with Clip-Path
animation clip-path SVG animation

Animating with Clip-Path

clip-path is one of those CSS properties we generally know is there but might not reach for often for whatever reason. It’s a little intimidating in the sense that it feels like math class because it requires working with geometric …

Avatar of Travis Almand
Travis Almand on Jul 9, 2019
Direct link to the article Restricting a (pseudo) element to its parent’s border-box
clip-path CSS

Restricting a (pseudo) element to its parent’s border-box

Have you ever wanted to ensure that nothing of a (pseudo) element gets displayed outside its parent’s border-box? In case you’re having trouble picturing what that looks like, let’s say we wanted to get the following result with minimal …

Avatar of Ana Tudor
Ana Tudor on Jul 2, 2019 (Updated on Oct 5, 2019)
Direct link to the article Using “box shadows” and clip-path together
box-shadow clip-path filter

Using “box shadows” and clip-path together

Let’s do a little step-by-step of a situation where you can’t quite do what seems to make sense, but you can still get it done with CSS trickery. In this case, it’ll be applying a shadow to a shape.…

Avatar of Chris Coyier
Chris Coyier on Apr 10, 2019
Direct link to the article 8 Little Videos About the Firefox Shape Path Editor
clip-path shape-outside

8 Little Videos About the Firefox Shape Path Editor

Direct Link

It sometimes takes a quick 35 seconds for a concept to really sink in. Mikael Ainalem delivers that here, in the case that you haven’t quite grokked the concepts behind path-based CSS properties like clip-path and shape-outside. …

Avatar of Chris Coyier
Shared by Chris Coyier on Mar 7, 2019
Direct link to the article CSS Triangles, Multiple Ways
clip-path css shapes glyphs SVG triangle

CSS Triangles, Multiple Ways

Direct Link

I like Adam Laki’s Quick Tip: CSS Triangles because it covers that ubiquitous fact about front-end techniques: there are always many ways to do the same thing. In this case, drawing a triangle can be done:

  • with border and a
…
Avatar of Chris Coyier
Shared by Chris Coyier on Mar 4, 2019
Direct link to the article Slice and Dice a Disc with CSS
clip-path CSS css variables custom properties

Slice and Dice a Disc with CSS

I recently came across an interesting sliced disc design. The disc had a diagonal gradient and was split into horizontal slices, offset a bit from left to right. Naturally, I started to think what would the most efficient way of …

Avatar of Ana Tudor
Ana Tudor on Jan 13, 2019
  • Newer
  • 1
  • ...
  • 2
  • 3
  • 4
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top