iBrandStudio - Resources in Designing Your Brand Identity

60+ Best CSS3 and jQuery Tutorials for Your Interactive Business Websites

Posted December 25th, 2012 in Tutorials by Eko S

Today, the business websites are designed to provide various types of interactions with users. And CSS3 and jQuery are used to reach it. CSS3 used to be just styling the web design, but it’s very powerfull tools with animation properties and 3d transform properties, you can easily create amazing animation, and if mixed with the awesomeness of jQuery and HTML 5, the results can be mind-blowing.

In this article, we’ll take a look at some of the excellent CSS3 and jQuery tutorials to help you create interactive website and enhance your business website. Enjoy!

TN3 Gallery – jQuery and WordPress Image Gallery (Featured Plugin!)

jQuery Slider Tutorials

Take a Tour Download

by TN3 Gallery
A jQuery slideshow plugin, TN3 Gallery is a full fledged HTML based customizable image gallery with slideshow, transitions and multiple album options. Compatible with all modern desktop and mobile browsers.

Here some of the amazing features:
– Slideshow and transitions effects
– Cross-browser and mobile support
– Dedicated WordPress admin panel
– Full-screen view
– Flickr, Facebook & Picasa support
See all features

How to Create an Interactive Graph using CSS3 & jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Valeriu Timbuc
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.

3D Flipping Circle with CSS3 and jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Mary Lou
In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

Sweet Tooltip a jQuery & CSS3 Tooltips

CSS3 and jQuery Tutorials

Tutorial Demo

by Hidayat Sagita
Sweet Tooltip is a jQuery & CSS3-based tooltip, not merely a one-style tooltip but seven. This imageless tooltips are crafted using CSS power, linear-gradient, box-shadow, text-shadow, :after and :before selector, etc.

Arctext.js – Curving Text with CSS3 and jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Pedro Botelho
While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that.

How to Create Accordion Menu (CSS3+jQuery)

CSS3 and jQuery Tutorials

Tutorial Demo

by Valeriu Timbuc
In this tutorial we will learn how to create an accordion menu using jQuery and CSS3. I hope you have enjoy it and be useful for you.

Portfolio Flipping Slider Using jQuery & CSS3

CSS3 and jQuery Tutorials

CSS3 and jQuery Tutorials

Tutorial Demo

by Hidayat Sagita
In this tutorial I’m going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.

Swatch Book with CSS3 and jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Mary Lou
A tutorial about how to create a swatch book like component that let’s you open and rotate the single swatches revealing some details. We will be using CSS transforms and transitions and create a simple jQuery plugin.

An Awesome CSS3 Lightbox Gallery With jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.

CSS3 & jQuery folder tabs

CSS3 and jQuery Tutorials

Tutorial Demo

by Catalin Rosu
In this article, I will use a similar technique in order to create some good looking CSS3 tabs.

Make a Jquery and CSS3 powered Lightbox Gallery

CSS3 and jQuery Tutorials

Tutorial Demo

by ruby_on_tails
Learn to make a fully functional lightbox using Jquery with both mouse and keyboard based controls for navigating images.

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Jon Phillips
More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons.

Pure CSS3 bokeh effect with some jQuery help

CSS3 and jQuery Tutorials

Tutorial Demo

by Marco
In photography, bokeh is the blur, or the aesthetic quality of the blur, in out-of-focus areas of an image, or “the way the lens renders out-of-focus points of light. In this article I want to add another addition to the bokeh “hype”, by creating a pure CSS3 bokeh effect. With some help from jQuery, we can add some randomness in colour, size and position for the effect.

How to Create Login Form with CSS3 and jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Valeriu Timbuc
In this tutorial we will code the Login Form that you can find in Futurico UI Pro made by Vladimir Kudinov. To create it we will use CSS3 and jQuery.

Thumbnail Proximity Effect with jQuery and CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Mary Lou
Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.

Flyout Image Slider Using jQuery & CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Hidayat Sagita
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.

Making a Sleek Feed Widget With YQL, jQuery & CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
Today we are making a sleek feed widget, that will fetch any feed and display it in your blog sidebar. You can set it up to show the latest posts from the different categories of your blog, your latest stumbles, or even people mentioning you on twitter.

Pretty Simple Content Slider with jQuery and CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Mary Lou
Today we will create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out. So, let’s start with …

Magnifying glass for image zoom using Jquery and CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by ruby_on_tails
Learn to make a realistic magnifying glass using Jquery and CSS3

How To Create a Stylish Content Slider using CSS3 & jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Jon Phillips
Content sliders are very popular because they work and usually don’t hinder usability and in many cases can even improve the user experience. Today we’ll learn how to create a stylish content slider using CSS3 and some jQuery magic.

Floated lists with CSS3 and jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Inayaili de León
In this quick tutorial, I’m going to explain how you can have a nicely floated list of items. We will use jQuery to make sure IE understands it too.

ShineTime – A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects

CSS3 and jQuery Tutorials

Tutorial Demo

by Addy Osmani
This week I’d like to show you how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.

The Mac Skype App menu with CSS3 and jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Marco
Today, I wanted to transfer the amazing slick Skype (for Mac) layout to your own webbrowser. Not the full layout: Only the menu where all your friends are listed. For the nifty layout we’re going to use CSS3 and for the extra functionality (ofcourse) jQuery.

Making an Impressive Product Showcase with CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
A product page is any page on your website that showcases a product. It has to describe its features, give some screenshots, and be descriptive.

Create Smooth Rotatable Images with CSS3 and jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Matt Doyle
In this tutorial I’ll show how you can use CSS3 transforms, along with some jQuery, to add smoothly rotatable photos to a web page.

How to Create an Image Slider using jQuery and CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Valeriu Timbuc
In this tutorial we will create a Slider with “Nivo Slider jQuery Script” and CSS3. We will use the “Nivo Slider jQuery Script” because it’s a powerful tool and it’s free.

Fullscreen Slit Slider with jQuery and CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Mary Lou
A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements.

Contextual Slideout Tips With jQuery & CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
The main idea is to create an easily configurable set of contextual slideouts. Each can be opened in one of four directions – bottom-right (default), bottom-left, top-left and top-right, and each can be in one of three colors – green (default), blue, and red.

Combining Modern CSS3 and HTML5 Techniques | $4

CSS3 and jQuery Tutorials

Tutorial Demo

by JeffreyWay
Just because some techniques don’t work in decade old browsers doesn’t mean that you shouldn’t be learning everything you can! Stay on the cutting edge, as we use everything from CSS shadows and animations, to HTML 5 mark-up and local storage, to utilizing jQuery to query the Picasa API . We’ll also take advantage of the excellent jQuery library, and review some best practices when coding.

Creating Android Dock Using jQuery & CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Hidayat Sagita
When playing the Galaxy Tab I love the fanciness of its Android’s dock. The application icon will pop out consecutively when arrow image on the dock clicked and not just the icon beautifully animated the dock itself also rotating vertically with 3D style. In this tutorial we’re going to create them using jQuery and CSS3.

Elegant Accordion with jQuery and CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Mary Lou
Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering.

Google Play’s minimal tabs with CSS3 & jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Catalin Rosu
In this article you’ll learn how to build some new CSS3 & jQuery tabs inspired by Google Play‘s design.

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Kevin Liew
This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of you as well. One thing about this dialog box, it uses CSS3 drop shawdow and a completely CSS3 skined button. So, latest version of chrome, firefox and safari will have no problems with it, but for IE6 and 7, the script will work but the display of the dialog box will look plain, no rounded border, drop shadow and gradient (i think ie8 will work).

Cross-Browser Rounded Buttons with CSS3 and jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Rob Glazebrook
So here’s the scenario: I was tasked with replacing several dozen Photoshop-generated rounded buttons for a larger site with an HTML/CSS/JS equivalent. Prior, any time anyone wanted to change text on a button (and it seemed to happen often), a graphic designer had to fire up Photoshop, modify a file, adjust for size, output an image, and pass that file off to the person building the page. It was an involved process for something that should have been simple.
So let’s make it simple!

CSS3 Transition Animations With jQuery Fallbacks

CSS3 and jQuery Tutorials

Tutorial Demo

by Addy Osmani
In today’s post, we’ll be taking a look at how you can use CSS3 transitions to power your application’s animations with jQuery’s .animate() method as a fallback where transitions aren’t supported

Shiny Knob Control with jQuery and CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
In this tutorial we will be writing a jQuery plugin for creating a shiny knob control. Aptly named knobKnob, this plugin will use CSS3 transformations and jQuery’s new event handling methods to give visitors of your website a new way of interactively choosing a value from a range.

Create a awesome images gallery using css3 and jquery

CSS3 and jQuery Tutorials

Tutorial Demo

by Razvan
Today we will be creating a very simple but great looking css3 image gallery using jquery and css3. The image gallery will be tilted to the side and on hover will move. Whenever you click on the image a lightbox will pop out. So lets begin.

jQuery & CSS3 3D Interactive Photo Stack

CSS3 and jQuery Tutorials

Tutorial Demo

by Addy Osmani
Hey guys. I’ve been writing a few pieces for .NET magazine on CSS3 and thought I’d whip together something lightweight with jQuery to show you how you can use CSS3 transforms to create 3D interactive photo stacks.

Photobooth with PHP, jQuery and CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

CSS3 Rounded Image With jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Nickla
My goal to use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot above.

CSS3 Custom Form Inputs | $5

CSS3 and jQuery Tutorials

Tutorial Demo

by jacobdubail
Style your form’s radio buttons, checkboxes and select drop downs with custom backgrounds. Then, add advanced functionality to your form with jQuery.

Halftone Navigation Menu With jQuery & CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

How to Create Calendar using jQuery and CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Valeriu Timbuc
In this tutorial we will code the jQuery and CSS3 Calendar that you can find in Futurico UI Pro made by Vladimir Kudinov. To do it we will use CSS for all the styling and for “functionality” we will use jQuery and jQuery UI.

Item Blur Effect with CSS3 and jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Mary Lou
Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item.

Creating “Next Level” Search Form Using jQuery & CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Hidayat Sagita
The question is “how far we can go for styling search form?”, in this tutorial we are going to move search form to the next level using jQuery & CSS3.

Typography Effects with CSS3 and jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Mary Lou
Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.

Interactive menu with CSS3 & jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Catalin Rosu
In this article you’ll learn how to create an interactive menu using CSS3 goodness and jQuery’s power.

FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms

CSS3 and jQuery Tutorials

Tutorial Demo

by Addy Osmani
Today I would like to present a project that tries to streamline this experience – FormBox. FormBox is a jQuery and CSS3 powered navigation menu that supports integrated forms.

Coding a Rotating Image Slideshow w/ CSS3 and jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Matt Doyle
In this tutorial you’re going to learn how to create a virtual light table using jQuery and CSS3. A traditional light table is a flat illuminated panel that you can place transparent slides on for viewing. Our “light table” is going to be an image of a wooden kitchen table, and the photos will be prints rather than transparencies, but the basic idea is the same!

Awesome CSS3 & jQuery Slide Out Button

CSS3 and jQuery Tutorials

Tutorial Demo

by Mary Lou
Here is an awesome little slide out button. The inspiration for that button came from photoshop.com where Flash is used to create a nice slide out effect. This button does not behave exactly the same, but the effect is quite neat. It does not use any images and uses the border radius property to make …

Recreating the MLB.com Content Switcher with jQuery and CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Louis Lazaris
My goal with this project was to try to recreate the switcher without any extraneous images or other non-essential elements that tend to make stuff less maintainable.

RocketBar – A jQuery And CSS3 Persistent Navigation Menu

CSS3 and jQuery Tutorials

Tutorial Demo

by Addy Osmani
RocketBar is a simple solution for this which shows you how you can easily provide your users a persistent form of site navigation without them needing to scroll back up.

Having Fun With CSS3: Spinning Newspapers

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
So lets have some fun and build this classical scene using the CSS3 animations capabilities of the new versions of Firefox, Chrome and Safari, picking useful techniques along the way.

Create Presentation Slides with HTML and CSS | $2

CSS3 and jQuery Tutorials

Tutorial Demo

by JeffreyWay
In this 5-part screencast course (and written tutorial), I will personally take you step by step through the process of creating custom presentation slides from scratch.
We’ll discuss everything from JavaScript best practices, to the latest techniques in CSS3 , to perfect HTML markup. Ready?

How to Create a Responsive Image Slider in jQuery and CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Valeriu Timbuc
Today we will code a responsive image slider from the Impressionist UI. We will code it using the FlexSlider plugin for the functionality and style it using CSS3. I hope you will enjoy it and find it useful for your projects. Lets get started!

Direction-Aware Hover Effect with CSS3 and jQuery

CSS3 and jQuery Tutorials

Tutorial Demo

by Mary Lou
How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.

Making Better Select Elements with jQuery and CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
Today we are building a script that is going to take an ordinary select element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.

Coding a CSS3 & HTML5 One-Page Website Template

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
Today we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in.

BounceBox Notification Plugin With jQuery & CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
Earlier this week, while working on ZineScripts‘ coupon code system, I found the need to be able to dynamically create and present a message box to Zine’s visitors. The usual routine would include digging through jQuery’s plugin repository and ending up with using a lightbox alternative, but I decided to take the time and build an one-off notification solution, which I am sharing with you today.

Colorful Sliders With jQuery & CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.

Sweet AJAX Tabs With jQuery 1.4 & CSS3

CSS3 and jQuery Tutorials

Tutorial Demo

by Martin Angelov
Today we are making an AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery, so be sure to download the zip archive from the button above and continue with step one.

share button
Powered by Shutterstock

2 Responses so far.

  1. [...] 60+ Best CSS3 and jQuery Tutorials for Your Interactive Business Websites – In this article, we’ll take a look at some of the excellent CSS3 and jQuery tutorials to help you create interactive website and enhance your business website. [...]

  2. Tarek says:

    Hi there,
    Maybe you also like http://www.twittstrap.com/resources More than 150 resources

Leave a Reply