Modern web sites are designed to provide various types of interactions with users. CSS3 and jQuery effects are used in most of those situations.
Now days jQuery is on top of its charm and everyone from design world love to experiment with it. Because of the remarkable significance of JQuery in Designing field, it is an essential to keep yourself up-to-date with its Quality uses and Examples.
In this compilation, we’ll take a look at some of the excellent CSS3 and jQuery tutorials to Enrich your knowledge as well as your site’s user experience.
In this tutorial you’ll learn some experimental 3D image transitions that use CSS3 animations and jQuery with the use of CSS3 3D Transforms for Webkit.
In this tutorial you’ll learn many Image Style tips using CSS.
Tutorial on a simple parallax content slider with different animations for each slider element and a background parallax effect.
In this tutorial you’ll learn how to create a experimental 3D gallery that uses CSS 3D transforms.
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 to create unique slide transitions.
In this tutorial you’ll going to learn 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. Using CSS3 transition, animation and transform for this animation and jQuery for helping maintain click event, CSS transition and animation.
In this tutorial you will learn how to create a CSS3 only image slider. The CSS3 features using in this tutorial are in tests in the most recent browsers so this slider will not work in all browsers (try preview in Chrome and Safari).
This tutorial shows you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. Using radio buttons with labels and target the respective panels with the general sibling selector.
There are many ways on displaying portfolio, one of them is using grid style with slider effect for pagination. In this tutorial you will learn about how to displaying portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.
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. Naturally, this is the place where you build up the visitor’s interest towards your product, but it is getting increasingly difficult to be original in grabbing their attention. In this tutorial you’ll see how to create a impressive product showcase with CSS3 and jQuery.
In this tutorial you will learn how to create a Slider with “Nivo Slider jQuery Script” and CSS3. “Nivo Slider jQuery Script” is a powerful tool and it’s free. This script has 16 transition effects, it’s simple, flexible and have a lot of more nice features.
In this tutorial you’ll learn how to create a CSS-only fullscreen background image slideshow via creating different image transitions and also make a title appear using CSS animations.
In this tutorial you can see how to create image slider controls using the brilliant Nivo Slider jQuery Plugin. The UI is directly taken from Orman’s Image Slider Controls.
Rather than using a bloated plugin that has features you’ll never use, this tutorial shows you how to create a super simple lightbox for handling images. It’s perfect for image galleries, portfolios, and more!
In this tutorial you can see how 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.
In this tutorial you will learn the making a portfolio with HTML5, jQuery and CSS3 that features an interesting growing effect.
You must seen a website showcasing image thumbnails that are slightly rotated? It’s a simple effect that adds a layer of visual personality. Saying that, if you’re not achieving the rotation effect with CSS, you’re working too hard! This tutorial lets you learn how to do it right!
In this tutorial you will see how to create a content navigator with CSS only. The idea is to have several slides or content layers that show or hide using the
:target pseudo-class. With CSS transitions you can make the slides appear in a fancy way. You’ll also learn how to make the whole thing responsive.
In this tutorial you will see how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that one can find on the page of the Google SketchUp Showcase.
The navigation of a website is one of the most fundamental aspects to make or break a user’s experience. This tutorial gives you insight on how to make a slick navigation menu using only CSS3.
In this tutorial, You will see how to use simple technique in order to create some good looking CSS3 tabs.
Here you will learn how to create a awesome looking vertical navigation menu with CSS3 and jQuery while using the minimal amount of images possible.
In this tutorial, You will see how to create some creative menu hover effects. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations.
The tab navigation is an element you often meet in your daily browsing. There are so many ways, so many styles, but the idea is the same: you click a tab and see its content without a page refresh. In this tutorial you’ll learn how to build some new CSS3 & jQuery tabs inspired by Google Play‘s design.
In this tutorial, you’ll learn how to create a simple and clean CSS3 menu in just a few steps.
A breadcrumb navigation allow users to know where they are in a hierarchical structure and navigate back to higher-level pages in the hierarchy. Also, the breadcrumbs can reduce the number of actions a user needs to perform in order to navigate back. If you have a website with lot of pages and sub-levels, in order to increase usability, you need to use breadcrumbs. Having said that, here you’ll learn how to create your own cool CSS3 breadcrumbs.
In this tutorial you will see making of some awesome CSS3 buttons! They’re based on the popular PSD freebie by Orman Clark.
In this tutorial you’ll learn how to create an interactive menu using CSS3 goodness and jQuery’s power.
Here you will learn 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.
A tutorial about how to create a swatch book like component that let’s you open and rotate the single swatches revealing some details. Using CSS transforms and transitions and create a simple jQuery plugin.
In this tutorial you’ll see how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighboring thumbnails proportionally to their distance. Also how to make a description appear.
Using the general sibling combinator and the
:checked pseudo-class, you can toggle states of other elements by checking a checkbox or a radio button. In this tutorial you will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.
In this tutorial you will see how 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 by fetching the most popular images from Instagram every hour, and use them as pages.
Here you will learn to make a realistic magnifying glass using JQuery and CSS3. The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. JQuery is used to position it at the cursor coordinates and change the background position accordingly.
This tutorial shows 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 draws the attention to the currently hovered item.
Here you’ll take a look at spicing up web banners, ads or any content for that matter, with CSS3 animations.
This tutorial shows you some crazy effects with Border Transitions. Pretty basic CSS3 code, but amazing output.
In this tutorial you will see how to 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.
In this tutorial, You will see the steps to create a full HTML5 CSS3 contact form like the one above, without using any images.
The typical Flickr interface design includes a lot of Ajax panels which you can edit right from any settings page. In this tutorial you’ll learn how to create such features. By building a set of small dynamic photos with a title and description. Then using jQuery one 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.
Here you will see how to create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things one can do with CSS3 animations and transitions and explore some of the possibilities.
You can flip elements in 3D space with CSS3. In this tutorial you will see how to use transforms to create an interesting flipping effect on an Apple-inspired form.
Vertical rhythm is a core component of many type-based design approaches, here in this article you will learn the basics, and how to deal with irksome images.
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.
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. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.
While compiling this showcase, it’s always a possibility that we missed some other quality CSS3 and jQuery tutorials. Feel free to share it with us.