Skip to main content
CSS is fun and cool and I like it.
Article

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 Bible Project’s website. They make really cool animations, and I mean, really cool animations.… Read article “Weaving One Element Over and Under Another Element”

Article

Recreating the Facebook Messenger Gradient Effect with CSS

One Sunday morning, I woke up a little earlier than I would’ve liked to, thanks to the persistent buzzing of my phone. I reached out, tapped into Facebook Messenger, and joined the conversation. Pretty soon my attention went from the actual conversations to the funky gradient effect of the message bubbles containing them. Let me show you what I mean:

This is a new feature of Messenger, which allows you to choose a gradient instead of a plain color for … Read article “Recreating the Facebook Messenger Gradient Effect with CSS”

Article

Multi-Line Inline Gradient

Came across this thread:

My first thought process was:

But it turns out we need a litttttle extra trickery to make it happen.… Read article “Multi-Line Inline Gradient”

Almanac

mix-blend-mode

The mix-blend-mode property defines how an element’s content should blend with its background. For example, the text of a <h1 could blend with the background behind it in interesting ways.

.blend {
  mix-blend-mode: exclusion;
}
CodePen Embed Fallback

In the example above the content has been modified by the mix-blend-mode so that the colors of the text are excluded from its background. This is just one of many values for this property.

There is an issue with Chrome 58+ where mix-blend-modeRead article “mix-blend-mode”