Anna Ehrnsperger
Design Code

Build a Great Website without JavaScript

28 Oct 20

You don't necessarily need JavaScript to develop a good looking website. CSS clip-path and mix-blend-mode could help you spice up your next project.

Try it yourself!

clip-path

With clip-path you can define which part of an element should be displayed. All types of shapes are possible. Here's a useful tool for defining the shape. I also use this technique on my website.

To achieve the following effect, we place two elements on top of each other. The one on top gets a rectangular clip-path. On hover, the clip path transitions from 0% to 100% on one side. This causes the top element to fade out and the one below it to fade in.

<p class="hidden">AB </p>
<p class="front">ABC</p>

p {
  position: absolute;
  top: 0;
}

.hidden {
  background: white;
  color: black;
}

.front {
  background: black;
  color: white;
  clip-path: inset(0 0 0 0);
  transition: clip-path 3s;
}

.front:hover {
  clip-path: inset(0 0 0 100%);
}

You can also animate the shape of the clip-path.

p {
  position: absolute;
  top: 0;
}

.hidden {
  background: white;
  color: black;
}

.front {
  background: black;
  color: white;
  clip-path: polygon(0 38%, 0 0, 100% 0, 100% 43%, 100% 100%, 0 100%, 0 55%);
  transition: clip-path 1s;
}

.front:hover {
  clip-path: polygon(0 38%, 17% 11%, 49% 34%, 100% 43%, 58% 66%, 24% 77%, 0 55%);
}

mix-blend-mode

With mix-blend-mode you can blend an element with the background. There are many different modes like multiply or difference.

In this example there's a fixed image as background. On top of it there are multiple images that get different blend modes.

<img class="fixed" src="image-src">
<img class="difference" src="image-src">
<img class="screen" src="image-src">
<img class="multiply" src="image-src">
<img class="darken" src="image-src">

.fixed {
  position: fixed;
  top: 0;
}

.difference {
  mix-blend-mode: difference;
}

.screen {
  mix-blend-mode: screen;
}

.multiply {
  mix-blend-mode: multiply;
}

.darken {
  mix-blend-mode: darken;
}

You can also mix these techniques!

<div>
  <img src="image-src">
  <p>zzz</p>
</div>

div {
  background: white;
}

img {
  clip-path: circle(30% at 50% 50%);
  transition: clip-path 1s;
  mix-blend-mode: luminosity;
}

img:hover {
  clip-path: circle(50% at 50% 50%);
  mix-blend-mode: normal;
}

p {
  pointer-events: none;
  position: absolute;
  color: white;
  mix-blend-mode: difference;
}

Here's the code for all of them.