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!
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
We’re going to see and create three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery.
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.