Pin It

20 Must See CSS3 and jQuery Tutorials

It is really fascinating to see how much the web design development has evolved over the last two years. Although, HTML will not be fully implanted until 2014 , many web designers/developers, companies and web enthusiasts are using HTML5 and CSS3 in their products and apps. In this post we are sharing 20 recent web design tutorials that explore the true potential of HTML5, CSS3 and with a mix of good old jQuery.

3D Flipping Circle with CSS3 and jQuery

Codrops shows you how to create 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

Creating a 3D Rotating Menu with CSS3

Using CSS3 property 3D transforms, this tutorial show you how to create a neat effect on a website menu.

Building Web Presentations Using jQuery Mobile

Using jQuery mobile create a HTML5 themeable presentation. To see the transition, click on the next button on the bottom

CSS 3D Folding Animation

David Walsh teaches us how to create folding animation with CSS3.

Create Quick and Easy Progress Bar Charts with HTML5 and CSS3

A quick progress bar with CSS3 adn HTML5.

Animated Fullscreen Background Image Slideshow

Marco shows how create a background image slideshow using Templates and Easing jQuery plugins.

Floating jQuery Sidebar

In you need a sidebar that is fixed and moves with the page follow this article. You can create a floating social media sidebar using this tutorial.

Designing an Effective Pricing Table

Create a very professional pricing table with CSS3.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

With CSS3 sudo element :before,:after you can create a Polaroid looking image stacks.

Simple, Yet Usable JQuery Based Dropdown Menu

 jQuery based dropdown menu

Slide-in Backgrounds with jQuery

This tutorial creates  slide in background effect when the page loads.

Growing Thumbnails Portfolio

Tutorialzine shows how to create image the expands gradually when hovered with jQuery

Growing Thumbnail with jQuery

Circle Hover Effects with CSS Transitions

Another great article from Codrops that uses CSS3 transition to create Circle Hover Effects.

Circle Hover Effects with CSS Transitions

Notification Bubble with CSS3 Keyframe Animation

Using jQuery and CSS3 keyframe animation create a notification bubble on a webapge.

Gravatar Login Box Design with Jquery, CSS and PHP

This is  a tutorial on how to create a login form with basic level CSS implementation and few lines of jQuery and PHP code.

Custom CSS Buttons & jQuery Events Tutorial

jQuery can add and remove class to your HTML to create pressed state. This tutorial will show you how you can achieve that.

Get started with jQuery Masonry

.net Magazine explains how to create a Pintrest like Dynamic Layout.

jQuery Pintrest Layout

Create a Beautiful Password Strength Meter

Check the strength of entered password using jQuery Complexify plugin

Ajax Stylish Captcha and Contact Form using JQuery and PHP

Make slick contact form that works without page reload.


Author:

Kawsar Ali is a web designer who also likes blogging. In his spare time he walks around with a Nikon D5100 hunting for good textures.


  • http://twitter.com/Mahdi_Hyp Mahdi-

    Really awesome list! thanks

  • Crankit

    That capture text could possibly be pronounced ‘pee-yoobs’ (pubes)!!