Category: CSS

This is a fun experiment with proof-of-concepts for various simple media pop ups on hover or touch. The idea is to show images, videos or other media in a pop up style with different effects. …

Simple loaders for your web applications using only one div and pure CSS. Usually it’s common to show a loader to the users when they must wait something in a web application (an ajax request …

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 …

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 …

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 …

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, …

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 …

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 …

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 …

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 …