jQuery SVG Tutorial Plugin & Tutorials with Example

Tooltip Styles Inspiration with CSS3 & SVG

Tooltip Styles Inspiration with CSS3 & SVG

A small collection of various hover tooltip styles and effects for your inspiration. Using CSS transforms, border-radius and SVG shapes we can create modern looking and interesting tooltips.

Tooltips are normally used for providing some kind of extra information and they can be found in almost every website. Those tiny little helpers offer a great opportunity to add some subtle and unique effects to any design. So today we want to show you some possibilities of showing those elements in style. We only use CSS transitions via hover and also some SVGs to create unique shapes.

Off-Canvas Menu Effects with CSS3 & SVG

Off-Canvas Menu Effects with CSS3 & SVG

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.Today we want to show a new set of modern effects for your inspiration. Different layouts and synced transitions of the menu and the page can make everything look more interesting and we can make use of the available space for side-menus and controls. SVG allows us to play with organic shapes and add some unexpected and stylish moves to a design.

Tab Styles Inspiration with CSS3 & SVG

Tab Styles Inspiration with CSS3 & SVG

Today we’d like to share a couple of tab styles with you. We use pseudo-elements, SVGs and CSS transitions for some of the techniques.The collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. Depending on your design, different tab layouts and looks can spice up your sections; think outside of the box (literally) and you’ll see how interesting the usually boring tabs can become.

oblurlay : Blur view of iOS7 style with CSS & jQuery

oblurlay : Blur view of iOS7 style with CSS & jQuery

oblurlay is implement a blur view of iOS7 style with svg and jquery.

Page Preloading Effect with CSS3 & SVG

Page Preloading Effect with CSS3 & SVG

A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs.

Enliven ‘em! – Animation Engine for Vector Graphic

Enliven 'em! - Animation Engine for Vector Graphic

Enliven ‘em is a jQuery plugin which lets you animate any vector graphic in SVG form in many different ways when your illustration become visible in a user browser viewport (suitable for “non-hover” devices like Apple’s ones). Also you can allow an animation to be repeated when user click your graphic.

Features:

  • More than 70 build-in effects
  • Suitable for Touch Devices
  • Both In and Out Animations
  • Your SVG can be Responsive
  • Easy Integration
  • Separate Animation Editor App
  • All Modern Browsers (with some IE and Opera restrictions)

Icons Filling Effect with CSS3 & SVG

Icons Filling Effect with CSS3 & SVG

An eye-catching filling effect for your icons, that can be used to make a simple page look cool and dynamic.

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.).

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.

StatMapSVG : Statistical Map SVG & jQuery

StatMapSVG : Statistical Map SVG & jQuery

StatMapSVG is a jQuery plugin to display statistical data in the form of a map such as the number of people in each area, the location and distribution of data, grouping data based on the value of a specified interval, and others. StatMapSVG takes map files in SVG format and makes them interactive. You can use StatMapSVG for country maps, province maps, city maps, floor plans and others.



Best jQuery websites design awards