Category

TUTORIALS

Category

Color Extraction Effect is a little slideshow with a color palette creation effect using CSS Filters and Vibrant.js. The idea is to create a color palette from an image with a subtle effect on the image itself and some fanciness on the palette. Vibrant.js by Jari Zwarts is used to extract the colors from the images, and CSS Filters to transition the image to a black and white version.And also a special ”curtain effect” is…

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect. Basically add a tilt effect to an image by subtly moving copies of layers of semi-transparent divisions with the respective background-image. This technique uses some CSS properties that only work in modern browsers (i.e. 3D Transforms). The effect only works on hover which means that…

This is a CSS powered animation, that replaces the refresh of the page while the content is updated using Ajax. The idea come from replacing the refresh of a web page with an animation, that takes place while the new page content is loaded using Ajax. basic load() function has been impelemented to upload new content, but you may want to replace it with, for example, a $.ajax call in order to handle errors, etc.…

This is a collection of 15 simple CSS spinners made with CSS and minimal HTML markup. You can use any spinner on your site with only a few lines of code. Or check out the source on Github and start making your own. All spinners are also available via bower. All loading indicators are designed to be used with minimal markup: Simply replace “loading-indicator” with the class name of your choice. Many of the spinners…

This is a responsive and easy to customize mega-dropdown component tutorial by Codyhouse. One of the most challenging part when you’re working on a web projects with lots of content is to make it easy for a user to navigate through this content. One example we can all think of is Amazon: infinite categories, each one with its own sub-categories… that’s why they currently provide an easy-to-access navigation, in the form of a mega-dropdown element…

Yes, i know this is not something fresh but i just want to share for whom did not not see it yet.It’s called Tearable Cloth – a Javascript cloth simulation.It’s been created by dissimulate Tearable Cloth Tear the cloth with your mouse Right click and drag to cut the cloth Reduce physics_accuracy if it’s laggy See the Pen Tearable Cloth by dissimulate (@dissimulate) on CodePen.

Smoke is the most complete jQuery Plugin and designed for use with Bootstrap 3.It has many features and to work, Smoke plugin requires these two libraries JQuery, Bootstrap 3. Features: Form Validation Notifications Progressbar Fullscreen Panel Helpers Smoke is open source. It’s hosted, developed, and maintained on GitHub.

This is a Pure CSS Content Filter by Sam Gordon For a simpler effect with fewer lines of CSS, trade the width, height, padding, margin, and opacity properties in each checked input style for “display:none;” — these styles were just set to have a nice tranisition between filters. See the Pen Pure CSS content filter by Sam Gordon (@samgordon) on CodePen.

This is an animated button effect based on Google’s “Material Design”.The buttons and effects are all created in CSS so you do not need JS.They have nice and discreet effect. It’s been created by Jon Brennecke – Freelance Developer from Portland, OR. See the Pen CSS only “Material Design” Animated Buttons by Jon Brennecke (@jonbrennecke) on CodePen.