Archive for the ‘clip-path’ Category

Using CSS Clip Path to Create Interactive Effects

Posted on: No Comments
Do you remember being a kid, cutting out pictures from magazines? Did you glue them onto paper to create your own collages? This post is about cutting out images on the web using the CSS property clip-path. We will discuss how to do the cutting and how...

CSS Glitch Effect

Posted on: No Comments
Today we’d like to show you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will hav...

Sliced Dual Image Layout

Posted on: No Comments
Today we’d like to share some layouts with a sliced image look with you. The idea is to show some text elements in a grid layout and change the content and images in a slideshow fashion. For the background image slices, we created a little plugin...

Little Fragments: Creating a Simple Image Poster Effect

View demo Download source Today we’d like to show you how to achieve a very simple, yet interesting effect with an image. The inspiration comes from a poster of the Grand Canyon with a fun distortion-like effect: some pieces of the image are cut...

Building A Circular Navigation with CSS Clip Paths

Posted on: No Comments
The following is guest post by Sara Soueidan. Sara is always doing wonderful creative work, and then does an equally wonderful job explaining all the ins and outs of how it was done with web tech. Here, she'll walk us through building a circular menu i...

Inspiration for Button Styles and Effects

Posted on: No Comments
View demo Download source Today we’d like to share some fresh button styles and effects with you. The current “button trend” is quite exciting since there are a variety of design details in use which allow for a great diversity of st...