Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. You can choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB. Once you have included the imagehover.css. Place the following markup in to your HTML document. Edit the URL to your image and add your hover content. Then simply set the imagehover.css class of your choice to the…
Superplaceholder.js is a library to bring your input placeholders to life by cycling multiple instructions in a single input placeholder. Superplaceholder.js works best on latest versions of Google Chrome, Firefox and Safari and Chrome mobile. For all non-supported browsers, the library will graceful degradate without any explicit handling in your code. Superplaceholder.js is less than 1KB minified & gzipped.
Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.You can also add any HTML special character to your tooltips, or even use third-party Icon fonts: Balloon.css make use of pseudo-elements thus self-closing elements such as img, input and hr will not render tooltips. Also keep in mind that if pseudo elements are already in use on a element, the tooltip will conflict with them resulting in potential…
Tasty Hamburgers is a collection of tasty CSS-animated hamburger icons. There are 10 animated hamburger icons and also included is the source as a Sass library(Download and unzip the source files. Copy the files from the _sass/hamburgers directory into your project). It’s modular and customizable, so cook up your own hamburger. Hamburger menu icons can be useful in the right context, but they’re not the most accessible. A label can help make it more obvious…
This is an experimental plugin for animating SVG letters using Segment. The idea is to animate the path strokes of an interesting display font in a creative way.It’s been created by Codrops. Letters disappear and appear in an artistic way, getting drawn along their lines that allows to animate a font letter-by-letter.The first demo shows various use cases for different setting of the plugin and for the last couple of examples mo.js has been used.…
Tachyons was built for designing fast loading, highly readable, and 100% responsive interfaces with as little css as possible.Modules can be altered, extended, or changed to meet your design needs. Tachyons is available as a series of small self contained CSS modules. They aren’t dependent on each other but are designed to play well together. But Tachyons is also just CSS. And you should feel free to edit CSS that is in your project. Features…
This is a photographic filter project created using only CSS.These filters are inspired by VSCO and are not exact replicas of their filters, but are as close as they are. Unfortunately, IE & Edge browsers, as well as Opera Mini do not support filters and blend modes. Safari (desktop & IOS ) does not support the hue, saturation, color, and luminosity blend modes, but this should not affect the CSSCO filters much, if at all.…
This is a tutorial by Codrops on how to create a very simple intro effect similar to the one seen on the Takeit website where a stack of Polaroids gets animated to a grid when clicking on a button or when scrolling. On Takeit site, the grid continues to get animated throughout the page but in this tutorial you will see on how to achieve that one specific Polaroid-to-grid effect with all its trickiness. You…
This is a simple portfolio template, with project preview images that slide out to reveal the selected project by Coyhouse.The idea is to move blocks of content as a way to transition from the main/gallery page to the project page. All panels move along the y-axis (x-axis on smaller devices), and the movement is triggered by whether the user wants to learn more about a project, or wants to access the navigation.
This is a search form with advanced filtering options and quick link suggestions.It’s been created by Codyhouse.co A search box is an absolute must on content heavy sites. It plays a crucial role. While most designers don’t forget to implement a search box they forget/ignore a crucial element of the search box – its design. They believe all a search box needs are two simple elements: Input Field and Submit Button. You might be thinking…