Skip to content Skip to sidebar Skip to footer

20 Fresh And Useful CSS3 & jQuery Tutorials

We have selected 20 Fresh And Useful CSS3 & jQuery Tutorials and I think that you’ll certainly have a lot to learn from them. However, these specifically target beginners or intermediate users, so if you don’t find yourself in the above categories, then you shouldn’t waste your time here.

Recently, jQuery powered by CSS3 (or vice versa) has created some amazing stuff. Those of you who handle well both of them have probably made some good money. Now, below you’ll learn a lot of stuff starting from login forms, counters, 3d Galleries, CSS3 Animations for Image Transitions or Curving Text. Furthermore, I think you’ll find some interesting and well written tutorials. Nevertheless, enjoy, be inspired and if you will like this article then please share it with your friends or community! Many thanks! Cheers!

P.S. You would probably like to see 22 Hot & Awesome PS Tutorials and 30 Photoshop Tutorials That Will Rock Your Work.


3D Gallery with CSS3 and jQuery

With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, Tthese elements can be moved in 3D space and create a realistic effect.
The main idea is to create a circular gallery where we have an image in the center and two on the sides. Since we are using perspective, the two lateral images will appear three dimensional when we rotate them.



Arctext.js – Curving Text with CSS3 and jQuery

The main idea behind the Arctext plugin is to rotate letters with CSS3 transforms in order to place them along a curved path. The curve is always a segment of a circle (hence arc) for which the radius can be specified. The space and rotation for each letter will be calculated using that radius and the width of the text.



Audio Slideshow with jPlayer

Today we’ll share an audio slideshow with you. Using the open source audio framework jPlayer the slideshow will show images and play sound, changing the images at specified moments of the song/audio. While we’ll demonstrate a photo slideshow here, it is not limited to photos. It could also use div tags containing any kind of markup whatsoever.
The photos used in this tutorial are from the Library of Congress Flickr set. The mp3 is a Kurt Vile song that was downloaded from the Free Music Archive, a wonderful resource for Creative Commons Licensed songs.




Timeline Portfolio

Timeline is a jQuery plugin specialized in showing a chronological series of events. You can embed all kinds of media including tweets, videos and maps, and associate them with a date. With some design tweaks, this will make it perfect for a portfolio in which you showcase your work and interests.



Parallax Content Slider with CSS3 and jQuery

Using CSS animations, we’ll control the animation of each single element in the slider and create a parallax effect by animating the background of the slider itself.
The idea for this comes from the slider of the Kendo UI homepage, a framework for modern HTML UI. After we got some requests and questions about how to do something like that, we decided to recreate the effect.



Pull Down for Navigation


Mobile screen real estate is at a premium and one of the biggest problems to solve is how to display navigation when screen widths become quite narrow so I decided to have a look and see what I could come up with using some nifty CSS and a touch of jQuery.



CSS3 Menu Navigation Effect

We are going to see how to play nice effects without the use of jQuery. I remember this tutorial works perfectly on all browsers except Internet Explorer for the first two examples, while the last example will only be visible in Firefox, Safari and Chrome because it uses the CSS3 Animation Property.



How to Create Accordion Menu (CSS3+jQuery)




CSS3 with jQuery / Reverse Animation

I helped with jQuery to assign the specific class at the click of the button. In my opinion an interesting experiment, I hope you will like and find alternative paths in the realization of the same experiment with different techniques. And remember this animations are only visible in Firefox, Safari and Chrome.



Chained AJAX Selects

In today’s tutorial, we will build a set of chained select elements. Selecting an option in one of them will trigger an update on the page, showing you more choices to refine your selection. We will describe the options server side with PHP, so it is easy for you to hook today’s example to a database.



Shuffle Letters Effect: a jQuery Plugin



Making a jQuery Countdown Timer

Today we are going to build a neat jQuery plugin for displaying a countdown timer. It will show the remaining days, hours, minutes and seconds to your event, as well as an animated updates on every second. Note: the plugin is also available on Github.



Making a Page Flip Magazine

In this tutorial we are going to use PHP and the turn.js plugin, an implementation of the page flip effect with pure CSS3 and jQuery, to build a pretty magazine. We will fetch the most popular images from Instagram every hour, and use them as pages.




Shiny Knob Control with jQuery and CSS3

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 the Illusion of Stacked Elements with CSS3 Pseudo-Elements

Hopefully you’re familiar with the use of the :before and :after pseudo-elements in order to do some interesting effects with CSS. Here I’m going to show you how you can create a simple ‘stacked’ look to some images.



CSS3 Digital Clock with jQuery

In this tutorial I wanted to create a simple digital clock with date and time, with the help of jQuery script and CSS3 for a little animation, there’s nothing hard enough to understand the various methods and use your creativity in the best of ways.



Login Box Modal Dialog Window with CSS and jQuery

In this tutorial will introduce how to create a simple modal dialog window with jQuery by using of a login box. This tutorial requires intermediate knowledge of CSS and jQuery. For best results, please be sure to learn the basic of JQuery.




Elastislide – A Responsive jQuery Carousel Plugin

Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.



CSS3 Loading Animation Loop

We’re going to see and create three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery.



Experimental CSS3 Animations for Image Transitions

We want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Check out the Photo Transitions at the Safari Technology Demos site, some of which we got inspired by.