Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website of Carl Philipe Brenner. When you hover over one of the white portfolio items in the grid, you will see a subtle animation happening: the grid item becomes transparent and the border lines of each side animate clockwise, creating a really nice effect. In this case, the effect is done by animating the widths or heights of several spans with some JS. We’ll try a different approach that uses SVG and CSS transitions.
Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.
The special thing about these overlays is that they don’t have a fixed size like modals but they occupy all the screen, so when creating effects one has to take that into account and not overdo it. But that does not mean that we can’t go crazy and use some fresh and interesting effects, like, for example, morphing SVG shapes.
With this WordPress plugin you can easy integrate the SVG Avatars Generator, which lets your visitors create custom avatars. This Generator is based on SVG (Scalable Vector Graphic), which is supported by all modern browsers and does not depend on screen resolutions. As a result your visitors can download their avatars as SVG file or as PNG one (2 size options) which is converted from vector graphic parts and also upload to Gravatar.com and use their created avatars as gravatars. The integration of the SVG Avatars creator is quite simple too. This script has responsive interface and doesn’t use any usual images, like JPGs or PNGs (except for downloading), only vectors, which give us clean and perfect look on any devices including Retina.
Features:
Small UI elements usually don’t get too much attention when it comes to creative effects. They are often neglected because of their size. But they can offer a great opportunity to add some subtle, yet interesting effects. Recently, you might have seen some kind of dot navigation with a vertical or horizontal layout for scrolling a website to a section. Today we want to share a set of inspirational dot navigation styles with very subtle effects when we hover or when we click on them. For the effects we employ several techniques, including transitions on pseudo-elements, perspective and SVG.
In this tutorial we’ll recreate the hover effect as seen on The Christmas Experiments website. We’ll be using SVG for the shape and Snap.svg for animating it on hover.
The idea is to create a SVG with one path that represents the shape background for some caption and to morph that path into another one on hover. There are many creative possibilities and today we’ll create three different examples. The nice thing of utilizing SVG is that we can adjust the shape size to their parent container’s size and make everything fluid.
This jQuery integrated script (with some PHP files on a server side) lets your visitors to create custom avatars. The Avatars Generator is based on SVG (Scalable Vector Graphic), which is supported by all modern browsers and does not depend on screen resolutions. As a result your visitors can download their avatars as SVG file or as PNG one (2 size options) which is converted from vector graphic parts. The integration of the SVG Avatars creator is quite simple too.
Features:
