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

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

Moving Letters Animation Effect with AnimeJs

Moving Letters Animation Effect with AnimeJs

Here is a collection of some beautiful text letter animation effects with anime.js

Sliced Dual Image Layout with CSS

Sliced Dual Image Layout with CSS

Today we’d like to share some layouts with a sliced image look with you. The idea is to show some text elements in a grid layout and change the content and images in a slideshow fashion. For the background image slices, we created a little plugin that has a couple of additonal options. For making an interesting transition, we use a glitch effect. This effect we also apply to some of the text.

jQuery Multi level Push Menu Plugin

jQuery Multi level Push Menu Plugin

Multi-level push menu is cross-browser compatible jQuery plug-in allowing endless nesting of navigation elements.This jQuery plugin is inspired by Codrops MultiLevelPushMenu but unlike it not relaying on CSS 3D Transforms and therefore functional in older browsers too (i.e. IE 8).

Features:

  • Multi-level menu support
  • Endless nesting of navigation elements
  • Expand/Collapse navigation with a left/right swipe gesture
  • Push/Slide DOM elements of choice
  • Left-to-right and Right-to-left sliding directions
  • Flexible, simple markup
  • JS Array input, if markup is not present
  • A number of exposed Options, Methods and Events
  • Cross-browser compatibility (IE8+, Chrome, Midori, Firefox, Safari, Opera, Android Browser, iOS Safari)

On-hover image zoom effect using SCSS and Jade

On-hover image zoom effect using SCSS and Jade

The use of the :on-hover pseudo-selector and the (~) general sibling selector to create a mouseover zoom effect that follows your mouse cursor—similar to the effect that Amazon uses for its product photos—all without the use of JavaScript.

Morphing Page Transition with CSS & SVG

Morphing Page Transition with CSS & SVG

Today we’d like to share a simple morphing page transition effect with you. The idea is to morph an SVG path while moving an intro page up, creating an interesting, flowy look. For the animations we use anime.js and for some letter effects we use Charming. In the demos we use an “intro transition” in order to showcase the effect, but that’s of course only one of the many use cases for this kind of page transition.

Inspiration for Menu Hover Effects with CSS & JavaScript

Inspiration for Menu Hover Effects with CSS & JavaScript

Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations.