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

Tuesday : Quirky CSS Animation Library

Tuesday : Quirky CSS Animation Library

Tuesday is a stand-alone library you can use without any dependencies, but you can use Tuesday alongside other animation libraries as well. All Tuesday animation names start with td prefix so there is a low chance two libraries will collide unless there is another one that uses the same prefix and animation name.

Easy Wheel : jQuery Easy Controlled Wheel of Fortune

Easy Wheel : jQuery Easy Controlled Wheel of Fortune

Easywheel is a jQuery Plugin created to allow you to Build and Controle the Wheel of fortune.

Features:

  • 70% of styles is Editable with JSON Parameters.
  • You can choose the winner from parameters or Remotely from your server using AJAX.
  • 100% Responsive and compatible with any resolution.
  • There no Third-party libraries ( Except jQuery ) is required to run the plugin.
  • The generated SVG is customizable via JSON/CSS.

Devices.css : Modern devices in pure CSS

Devices.css : Modern devices in pure CSS

All devices are elegantly developed in pure CSS. The first are newly announced iPhone X and iPhone 8. More devices are coming. You can use these minimal devices in landing and screenshot showcase pages.

Time Well : Time & Daily Events Management jQuery plugin

Time Well : Time & Daily Events Management jQuery plugin

Time Well is a jQuery plugin to let you bind events to a specific date. All dates are shown in table. Clicking on a specific date opens the event container below the date container in which are listed all the events that are happening at the given day.

Features:

  • Javascript , jQuery and Css3 Code
  • Well commented Code
  • Unique & Modern Design
  • Retina & Responsive Ready
  • Flexible & Multipurpose
  • Customizable & Well Organized
  • Google Font Usage
  • 1170px Grid System

Instagram.css : Pure CSS Instagram Filters

Instagram.css : Pure CSS Instagram Filters

Instagram.css is a pure CSS Instagram filters. You can add all these Instagram-like filters to your photos with using CSS only.

Waffle grid : An easy to use Flexbox Grid System

Waffle grid : An easy to use Flexbox Grid System

Waffle grid is an easy to use flexbox grid system.The waffle grid system is super lightweight, weighing in at only ~7kb minified using the default settings.With classes for medium and small devices, the waffle grid can make your layouts fully responsive.The waffle grid system was written entirely in sass, so that you can easily change or customize the grid to suit your needs.

Truly Responsive Comparison Tables

Truly Responsive Comparison Tables

This Javascript plugin allows you to create truly responsive comparison tables. No squashed columns on mobile! Instead, your data is laid out in tab format on smaller screens, creating a clear, concise, and enjoyable experience for both your desktop and mobile users. Perfect for pricing plans and product comparisons!

  • Fully responsive
  • Zero dependencies
  • Cross-browser compatible

CSS Glitch Effect

CSS Glitch Effect

Today we’d like to show you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will have a clip-path, a blend mode and a translation applied to it.

SASS Progress Tracker with CSS3 Flexbox

SASS Progress Tracker with CSS3 Flexbox

A progress tracker written in SASS with flexbox to be flexible and responsive out of the box. This can be used to illustrate a multi stage process e.g. form, quiz or a timeline.

Angled Edges with CSS Clip-Path

Angled Edges with CSS Clip-Path

Add a consistent angled edge to a full width element. This technique uses CSS clip-path to clip the image but has a fallback using pseudo elements for older browsers. It is only intended for use on full width elements as it uses the vw unit to calulate the angle.