Archive for the ‘overlay’ Category

Dynamic Shape Overlays with SVG

Posted on: No Comments
Today we’d like to share another way of achieving morphing page transitions. This time, we’ll generate multiple SVG curves with JavaScript, making many different looking shapes possible. By controlling the individual coordinates of the seve...

Building a CSS Grid Overlay

Posted on: No Comments
Let's take a look at what it takes to build a grid overlay with CSS. It will be responsive, easily customizable and make heavy use of CSS variables (known more accurately as "CSS custom properties"). If you aren't familiar with custom properties, I'd ...

First Person Sunglasses Try-On Experiment

Posted on: No Comments
View demo Download source Today we’d like to share a fun little experiment with you: a geeky “try-on” sunglasses effect. It’s not a “try-on” in the classical sense for previewing how the sunglasses might ...

Multi-Layer Page Reveal Effects

View demo Download source Today we’d like to show you how to create a simple and modern page transition effect. Maybe you have spotted some of the cool effects seen on sites like Nation or Keep Portland Weird, where two or more layers of overlay...

CSS Overlay Techniques

Posted on: No Comments
Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. One of these design principles is the “Stay On Page” principle. ...