Category Archives: coding

Dynamic Shape Overlays with SVG

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 several layers of SVG paths, the curved shapes animate to a rectangle (the overlay) with a gooey motion. We use some nice easing functions from glsl-easings...

Dynamic Shape Overlays with SVG

File upload with preview

A simple file-upload utility that shows a preview of the uploaded image. Written in pure JavaScript. No dependencies. Works well with Bootstrap 4 or without a framework. This is a simple frontend utility to help the file-upload process on your website. It is written in pure JavaScript, has no dependencies, and is a small 13.55 kB (gzipped). You can check...

File upload with preview

Sticky Sidebar

Sticky Sidebar is a pure JavaScript plugin for making smart and high performance sticky sidebar, works with sidebar if it’s taller or shorter than the viewport, integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar or its container is changed, supports jQuery/Zepto and compatible with Firefox, Chrome, Safari, and IE9+.

Sticky Sidebar

Liquid Distortion Effects

The main concept of this demo is to use a displacement map in order to distort an underlying image, giving it different types of effects. To demonstrate the liquid-like transitions between images, we’ve created a slideshow. What a displacement map generally does, is using an image as a texture, that is later applied to an object, giving the illusion that...

Liquid Distortion Effects

A collection of CSS buttons

Aside from designing a variety of buttons, I also wanted to demonstrate the features of CSS and how it is now possible to accomplish a beautiful result without the need for raster images or complex client-side scripting. Finally, remember that there are so many more possible ways to design a button — these are merely just a few of them....

A collection of CSS buttons

5 Beautiful Image Effects With CSS Shapes and Filters

Five background images showcasing the power of modern CSS. They can be used as desktop wallpapers, eye-catching landing pages, and even as printed posters. In the article below we’ll also go over some of the key CSS techniques, so that you can customize them to your liking or make your own ones from scratch.

5 Beautiful Image Effects With CSS Shapes and Filters

SVG Line Morphing Transition

In this tutorial we’re gonna be looking how SVG line animation can be used as button’s indicator. The idea is to morph circular SVG line into straight line and morphs back into circle SVG. We will incorporate this effect into image carousel.

SVG Line Morphing Transition