jQuery CSS2 / CSS3.0 Plugin & Tutorials with Example

Smart Grid Gallery jQuery WordPress Plugin

Smart Grid Gallery jQuery Wordpress Plugin

Turn native WordPress Gallery  into Dynamic Grig Gallery with different lightboxes, hover effects and many other options. “Smart Grid Gallery” is responsive and touch friendly.

Features:

  • Use Native WordPress Gallery Shortcode
  • Built-in Shortcode Generator
  • Fully Responsive Layout
  • CSS3 Transition Effects
  • Two Different Lightboxes
  • 600+ Google Fonts
  • Support Touch Devices Like iPhone/iPad or Android
  • Highly Customizable

AniJS : Declarative handling library for CSS Animations

AniJS : Declarative handling library for CSS Animations

AniJs is a declarative handling library for CSS animations. The main objective is to provide an eloquent, easy to translate, and quick to develop environment.

Vertical Responsvive Timeline with Bootstrap

Vertical Responsvive Timeline with Bootstrap

In this tutorial I want to demonstrate how to build a vertical responsive timeline using Twitter Bootstrap. It’s free to use and includes many helpful styles for getting the page setup properly. Also since we’re using Bootstrap it is very simple to create a responsive effect for the vertical timeline. This effect works great on a landing page or detailed archives page.

Animated bubbles upwards continuously with pure CSS

Animated bubbles upwards continuously with pure CSS

Here is a pure CSS experimental work to create floating bubbles without using JavaScript. These animated bubbles are also with popping effect. All these animation is created by Pure CSS.

Notification Styles Inspiration with CSS3 & JavaScript

Notification Styles Inspiration with CSS3 & JavaScript

Some simple ideas and effects for unobtrusive website notifications. A little script is employed for showcasing some styles and CSS animations are used for the effects.Some of them are preceded by a dummy loading animation, which could be a nice idea for specific actions that require some time in a system (i.e. saving, sending a message, etc.).

Fixed Auto-Hiding Nav Bar with JavaScript

Fixed Auto-Hiding Nav Bar with JavaScript

Top navigation bars have always been popular in web design. Since these elements contain such vital information some designers like to keep them fixed on-screen while scrolling down the page. But unfortunately this can get in the way of content if the bar is too large. A popular online blogging platform Medium created an interesting method of hiding the bar when scrolling down and re-showing it when scrolling back up.

Alternate Fixed & Scroll Backgrounds with CSS

Alternate Fixed & Scroll Backgrounds with CSS

How to create alternate fixed and scroll backgrounds with no javascript, but just the help of the CSS background-attachment property set on Fixed.

Clipping in CSS and SVG

Clipping in CSS and SVG

CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to “clip” elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS and SVG, covering everything you need to know to get started.

shCircleLoader : HTML5 Circle loading animation jQuery plugin

shCircleLoader : HTML5 Circle loading animation jQuery plugin

shCircleLoader is a jQuery plugin, which helps web developers to create a variety of loading animations and integrate them easily into their web applications.

Features:

  • Customizable animation controlled by a wide range of options.
  • Normally you do not have to include CSS file, but you can do this turning off CSS styling from the script.
  • CSS “namespaces” allows you to create different loading animations in one page.
  • Custom CSS keyframe animtion declarations.
  • Optional progress status in the center of the animation.

Smart Fixed Navigation with CSS3 & jQuery

Smart Fixed Navigation with CSS3 & jQuery

A fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It’s smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution.



Best jQuery websites design awards