Please enable JavaScript to view this website.

Build a Great Website without JavaScript

Build a Great Website without JavaScript

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.

28.10.2020

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.

Build a Great Website without JavaScript
<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.

Clip Path Website
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.

Mix Blend Mode Example
<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;
}