Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo

Image Mask Effect with CSS & jQuery

Image Mask Effect with CSS & jQuery

An immersive transition effect powered by image masks and CSS transforms.

Inspiration for Search UI Effects with CSS & JavaScript

Inspiration for Search UI Effects with CSS & JavaScript

Today we’d like to share a couple of ideas for search interaction effects with you. Mainly, we’d like to provide you with some inspiration for how to show the search interface in an interesting way. Maybe you’ve seen some modern animations for showing the search already, like Swiss Army Man or CMMNTY. Today we want to explore some different layouts combined with some engaging CSS animations.

Muuri : Filterable & Draggable Grid Layouts with JavaScript

Muuri : Filterable & Draggable Grid Layouts with JavaScript

Muuri creates responsive, sortable, filterable and draggable grid layouts. Yep, that’s a lot of features in one library, but we have tried to make it as tiny as possible. Comparing to what’s out there Muuri is a combination of Packery, Masonry, Isotope and jQuery UI sortable.

Little Fragments: Simple Image Poster Effect with CSS & JavaScript

Little Fragments: Simple Image Poster Effect with CSS & JavaScript

A tutorial on how to create a simple image effect with little image fragments inspired by some poster art and powered by clip-path.

The inspiration comes from a poster of the Grand Canyon with a fun distortion-like effect: some pieces of the image are cut out and placed in a different position. The pieces are very small which creates an interesting and creative look. We’ll be showing you today how to create a similar effect with CSS and some JavaScript.

Unmatrix : jQuery plugin to Decomposes a CSS Transform

Unmatrix : jQuery plugin to Decomposes a CSS Transform

Unmatrix is a jQuery plugin that decomposes a CSS transform matrix into intelligible values.The plugin returns an array of objects if the browser supports transforms, or false if it doesn’t. Each item in the array can be either an empty object if the element has no transforms, or an object with the following properties: rotate, rotateX, rotateY, rotateZ, scaleX, scaleY, scaleZ, skew, skewX, skewY, translateX, translateY, translateZ.

Create Animated Skill Bar Using jQuery & CSS

Create Animated Skill Bar Using jQuery & CSS

Skill Bar is a modern way to give rating like if you want to compare mobile phones in terms of performance then skill bar is one of the best option to show performance rating in front of user there are number of ways to use this modern rating method skill bar.In this tutorial we will show you how to create animated skill bar using jQuery, HTML and CSS.You may also like animated progress bar using jquery.

Mirror Effect with CSS & JavaScript

Mirror Effect with CSS & JavaScript

Today we’d like to share a little effect with you that you might have already stumbled upon on the Web. It’s a kind of a mirror effect as seen on sites like Corentin Fardeau and Method.

Block Reveal Effects with CSS & JavaScript

Block Reveal Effects with CSS & JavaScript

Today we’d like to share a couple of ideas for a kind of block reveal effect that has been used in some designs recently. The main idea is to reveal content in a schematic box look. The effect first shows a decorative block element being drawn and when it starts to decrease its size, it uncovers some content underneath.

Formbase : CSS Form Style

Formbase : CSS Form Style

Formbase is a better default styles for common input elements.Formbase eliminates cross browser bugs, inconsistencies across systems and applies a beautiful default styling to several input elements.

  • Works in all modern browsers (and IE11)
  • No JavaScript, just CSS
  • Works with inputs, textareas, checkboxes and radio buttons
  • Zero dependencies

Immersive Video Template with CSS & jQuery

Immersive Video Template with CSS & jQuery

A full-screen video presentation, that is resized and animated to become the content of a mobile device.



Best jQuery websites design awards