This is a great tutorial to create a morphing dropdown that animates according to the size of its content. It’s first seen on Stripe.com website which is redesigned and Codyhouse guys has created the same navigation style. Basically, instead of hiding and showing a new dropdown “container” when the user switches from one navigation item to the other, they animate the dropdown background to make space for different content sizes. It works on all modern…
This project tries to mimic command line spinners like those from cli-spinners (where most of them are taken from) and bring them to the web.It’s pure CSS and font independent. Every Spinner is a fixed sized element with a pseudo element whose content is set to the parts of the spinner divided by \A to create line breaks. Then a stepped keyframe animation shifts the pseudo element up one line-height per step.
You’ve probably seen something similar to this before on car dealership sites. Pick a car, pick a color, pick wheel style, pick additional options etc. As you go through the image changes based on your selections. That’s a product builder! Product builders are useful shopping tools that allow potential customers to build an ideal version of a product by combining different options. At the end of this process the user is generally given an action…
A background image segment effect as seen on Filippo Bello’s Portfolio, employing the CSS clip-path property and powered by anime.js. This is a little decorative effect with you that we’ve encountered on Filippo Bello’s Portfolio, maybe you’ve seen it. It’s a really neat way to add some jazz to background images. The idea is to replicate boxes from a background with the same background image and make these boxes move in perspective towards the viewer.…
Mobi.css is a lightweight, flexible CSS library that focus on mobile.It’s only 2.8kb after gzip, less than Skeleton, Pure.css and Bootstrap v4, etc. Heavy use of flexbox, super flexible, less than 10 lines of custom style in the Homepage.It’s focused on mobile, show mobile pages in desktop with a sidebar on the left or right. Mobi.css provides two kinds of containers, container and container-side, as well as a simple but flexible grid system. Table of…
This is a simple slider, with morphing preview images animated using SVG properties developed by Codyhouse.What’s really powerful with SVG is the possibility to combine path animations with the clipPath element. You can add a touch of CSS transformations and you got a spicy recipe. Recommended Distorted Button Effects (SVG) 360 Degrees Product Viewer Gentelella – Free Bootstrap Admin Template
This is an interactive transparency background effect that makes images visible when specific points are hovered, showing some content once clicked.It’s been developed by Codrops. The main idea is to show a map or a base image with some points of interest (POS) and when we come close to one of these points and hover, an image starts to fade in. When clicking on the POS indicator, a content layer is shown with some more…
The tooltip is a common graphical user interface element used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small “hover box” with information about the item being hovered over. Tooltips are normally used for providing some kind of extra information and they can be found in almost every website. Those tiny little helpers offer a great opportunity for users.…
Family.scss is a set of 26 smart Sass mixins which will help you to manage the style of :nth-child’ified elements, in an easy and classy way. The goal of this project is to unleash the power of the nth-child property, in an easy way.The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three Each and every mixin is really easy to use and implement into…
Starability.css is an accessible rating form with cute animations.tarability ratings are done in pure HTML and CSS, and are accessible by keyboard, so even people using screen readers are able to use it.The goal of this small library was to combine this technique with neat animations and make it easy to quickly apply it to your website. Starability.css works in IE10+ and all modern browsers.