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…
Cleave.js has a simple purpose: to help you format input text content automatically. The idea is to provide an easy way to increase input field readability by formatting your typed data. By using this library, you won’t need to write any mind-blowing regular expressions or mask patterns to format input text. However, this isn’t meant to replace any validation or mask library, you should still sanitize and validate your data in backend. Features: – Credit…
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.…
Anime is a flexible yet lightweight JavaScript animation library.It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects. It’s been developed by Julian Gardner. Features – Specific animation parameters – Specific target values – Multiple timing values – Playback controls – Motion path Recommended 10 Best Color Pallet Generators ColorMeSass – Colour library for Sass CSSCO – Photographic filters made with CSS
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.
Pills is a responsive and tiny CSS grid system for web developers.It’s been developed by Rohit Kumar Rai. This CSS grid system is only 4kb and perfect for all modern browsers – IE8+, Firefox, Chrome, Safari, Opera. Pills has two parts: First – This will have a 12 columns for that granular control but still would be simple enough like English language. Second – Inspired by Gridism thinking and catering to people who think fractional…
This is a fresh collection of animated transition effects with CSS. It’s been developed by Gabriele Mellera.You can either download it directly or if you are new to CSS animation effects you can find the detailed tutorial on how to create these effects. The CSS file is organized in different sections. For a transition to work properly you need to include the style shared by all effects, the custom effect style, and the keyframes to…
Smooth Scrollbar is a customizable scrollbar in modern browsers with smooth scrolling experience.It works in all modern browsers.Smooth scrollbar is defined as an UMD module which named Scrollbar, you can use any loader to load it. You can allow upper scrollable content to continue scrolling when current scrollbar reaches edge. When set to ‘auto’, it will be enabled on nested scrollbars, and disabled on first-class scrollbars.
Simple Grid is a mobile-first 12-column CSS grid system to make developing responsive websites easy and fast. All the code you need is simple and familiar. A parent container class contains the grid. Within the container are rows. Row classes denote rows of content, which can be filled with up to 12 columns. Columns must be nested within a row. To define your column width, declare how many columns you want your content to take…