A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
3D CSS3 Book Generator with jQuery
Today we made up my mind to develop something really interesting and useful for you. A new jQuery plugin – as a generator of books. The main idea is to display user friendly book basing on raw text (with images). The book consists of pages, each page consists of 2 sides (as in a usual book), there are buttons Back-Next at the sides of pages to navigate through the pages, and when we turn the pages we see that the pages are turned in 3D (powered by CSS3). In order to achieve this 3D effect we use CSS3 transform (rotate3d, preserve-3d and rotateY) and transition effects.
Meny : A CSS 3D fold-in menu concept
Meny is a three dimensional and space efficient menu concept. CSS 3D transforms are used for the transition effect and JavaScript is used to track mouse/touch movement.Move your mouse to the left edge of this page — or swipe in from the left edge if you’re on a touch device — to expand the menu.
Tooltipster : jQuery Tooltip Plugin
Tooltipster is a lightweight (4,813 bytes minified) jQuery plugin that enables you to easily create clean, HTML5 validated tooltips.
- Supports HTML tags inside the tooltip
- Lightweight and degradable
- Extremely flexible & fast to set up
- Easily styled with 100% CSS – no images needed
- Plays nicely with IE
Flickr-Style Dynamic Edit Fields with jQuery and CSS3
The typical Flickr interface design includes a lot of Ajax panels which you can edit right from any settings page. Their website layout incorporates many web 2.0 trends as you move from account settings to photo settings and uploads. There are plenty of resources we could look at, and in this tutorial I’d like to focus on one specific entity.
We can build a set of small dynamic photos with a title and description. Then using jQuery we can target whenever a user clicks on these fields to edit the content right from the page. It’s a beautiful technique for creating a sleek user experience with just a few blocks of code. I won’t be storing any of the content into a database, but tying into a backend PHP script would make that process easy enough to accomplish.
How to Create an Interactive Graph using CSS3 & jQuery
In this tutorial we will code an Interactive Graph using jQuery and CSS3. We will use the jQuery’s popular plotting plugin “Flot”. Flot is a pure JavaScript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. This plugin is simple but powerful enough to create some nice and interactive graphs. For more info take a look at documentation here. You can find the design of the graphs on Impressionist UImade by Vladimir Kudinov.
Flyout Image Slider Using jQuery & CSS3
In this post I’m going to share about how to create an experimental flyout image slider. This image slider is a stack of some images and works by flying out the selected image to the front of images stack. We will use CSS3 transition, animation and transform for this animation and jQuery for helping us maintain click event, CSS transition and animation.
This image slider doesn’t do slide on displaying image, as I described before it will be flying out the selected image to the front of images stack. So all images will be positioned stacked each other. When user click on of the image, it will be move to the outer left of image stack and move back with rotating effect to the stack and positioned on top of it.
