Milligram is a fresh minimalist CSS framework.Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! It’s only 2kb gzipped! It’s not about a UI framework. It’s been specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. First, see all download options available , then choose the most suitable option for your need. Now you should add the main file of…
A widget containing a list of suggested articles, with a reading progress indicator powered by SVG, CSS and jQuery.It’s been enriched by a filling effect to indicate the reading progress and SVG is used to animate the stroke property of a circle element. Note that the url changes according to the article in focus, in case the user wants to share a specific article as opposed to the whole page.
If you try to place labels for points on a timeline (or any 1D space), one common problem is the labels often overlap. How about making the labels push each other. You can play with the interactive demo below to see how Labella handles randomly generated labels with different parameters. Moreover, if you are looking for a ready-to-use timeline component with Labella’s smart labeling instead of building your own timeline from scratch, check out d3Kit-timeline.
Stretchy Navigation is a rounded navigation trigger that stretches on click/tap to reveal the navigation items.It’s been created by Codyhouse.The idea is to apply a stretching navigation, and create 3 different user cases where this snippet would be useful: 1) fixed navigation, 2) add content button and 3) edit content button.
This is the FREE Weather Icons with different weather related icons. Those icons have a common and pleasing style that will make it easy to add to any project.There are 208 weather icons in this set.Each icons comes with stroked and filled versions. The Weather series of The Icon Set is a custom @font-face icon font that can be styled dynamically using CSS.(Size, color and any style available in CSS.) This icon font uses the…
This a tutorial on how to create a Shazam-like button that morphs into a music player using Snap.svg.In this tutorial you will create a Shazam-like UI where we initially have a simple button that, when clicked, morphs into a listening button. And also some musical notes will be animated that fly from outside of the viewport to the listening button to indicate listening activity. Finally, the listening button will transform into a music player with…
This is a simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button. The idea is to animate each menu item once a level is changed. The animation starts with the item clicked and the delays are propagated through the neighbors. The animation delays follow the same logic for the incoming items of the new level of the multi-level menu. As optional elements we have a breadcrumb navigation and a…
An experimental interactive room slideshow based on the prototype concept by Bilal Mechairia’s Dribbble shot “Spaces”. This little experiment based on a Dribbble shot by Bilal Mechairia’s, called “Spaces”. The idea is to show an interactive room with several items that all float in 3D space and move according to the position of the mouse. Once an item is clicked, more details pop up. Navigating between the room “slides” will rotate the different wall sections…
This is a CSS-only Colorful Calendar Concept by David Khourshid.It’s based on Calendar App Animation by Kirill.Personally the color combination with gradients is really beautiful and with this app you can enjoy managing your schedule. See the Pen CSS-only Colorful Calendar Concept by David Khourshid (@davidkpiano) on CodePen.
simplebox.js is a lightweight lightbox plugin (603 bytes) that is easy to modify or extend to fit your needs. This plugin is intended to be a quick, responsive, efficient. simplebox.js is designed to have just one feature: lightboxing. It’s responsive out of the box and allows only a few crucial settings. To install simplebox, you will have to include the following resources in your page. The JS files should be loaded in the order stipulated…