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

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.

Microtip : Minimal CSS Tooptip Library

Microtip : Minimal CSS Tooptip Library

Microtip is a modern, minimal css tooptip library with accessibility baked in. Just `1kb` minified and gzipped.

Expanding Grid Item Animation with CSS & JS

Expanding Grid Item Animation with CSS & JS

Today we’d like to share a simple implementation of a grid animation with you that is based on the Dribbble shot. When a grid item is clicked, the background and the thumbnail are scaled up and moved to their fullscreen position. While the Dribbble shot is an animation for the mobile phone, we thought we could explore this concept for the desktop, too. We are using anime.js by Julian Garnier.

Graaf : Pure CSS Grid Overlays

Graaf : Pure CSS Grid Overlays

Graaf is a collection of pure CSS grid overlays for designing your new projects.

Checkbox & Radio Custom Style Bootstrap

Checkbox & Radio Custom Style Bootstrap

Custom style checkbox & radio for web:

  • Semantically Correct / Valid HTML Code
  • HTML5, CSS3
  • Full project and seed project (build with: Gulp, Sass)
  • Cross browser compatible ( Internet Explorer 8+, Firefox, Safari, Opera, Chrome etc. )
  • W3C Valid source code, properly formatted and commented
  • Animations CSS3