jQuery is a Java script library which is designed in order to simplify the scripting of HTML. Learning jQuery can be great fun and engaging for developers. When using jQuery the range of effects and applications that can be created are mindblowing.
In this post I’ve collected 16 recent web design tutorials that explore the true potential of HTML5, CSS3 and with a mix of good old jQuery, hope you’ll like it! So .. let’s rock!
In the past I’ve posted more sexy jQuery tutorials on the gonzoblog.nl: 15 useful jQuery Plugins for your next Web Project and 10+ Fresh and Awesome jQuery/CSS3 Plugin Tutorials.
Swatch Box with CSS3 and jQuery
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.
Making an Impressive Product Showcase with CSS3
Impress.js is a small, standalone library that makes it easy to design advanced CSS3 presentations with eye-catching effects. But what if we used impress.js for something other than a presentation? This is what we are doing today – we will be spicing up a plain old product page with some CSS3 magic!
Interactive Menu with CSS3 & jQuery
The idea behind this example was to have some nicely arranged blocks and once you click on one of them, the block will start showing its hidden content starting at its current position.
Besides being a menu, this example can also serve as a perfect single page website. For example, just think that a block can be named “Contact” and could contain a nice contact form.
How to Create Login Form with CSS3 and jQuery
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.
Slideshow with Impress.js
Create Calendar using jQuery and CSS3
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. From jQuery UI we will only use the “Datepicker” script. So you don’t have to download all the components available in jQuery UI and the file size will be lower.
Portfolio Flipping Slider Using jQuery & CSS3
There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. 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.
Fullscreen Slit Slider with jQuery and CSS3
In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll cut the current slide open in order to reveal the next or previous slide. Using different data-attributes, we’ll define the type, rotation angle and scale of a slide’s parts, giving us the possibility to create unique effects of each slide transition.
Perfectly Rotate and Mask Thumbnails
Ever 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! Learn how to do it right!
Creative Web Typography Styles
With a little bit of CSS magic we can transform text into beautiful typography and omit the use of images in many cases. In this tutorial we will be creating different web typography styles using the lettering.js jQuery plugin and various CSS techniques. For some of the examples we will also add hover transitions to make things a bit more interactive.
3D Thumbnail Hover Effects
In our examples, we’ll use thumbails that will reveal some more information on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover over it. For the hover effects we will use CSS 3D transforms.
Classic Digg-Style Radio Buttons with CSS and jQuery
3D Flipping Circle with CSS3 and jQuery
We’ll 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.
FrameWarp – jQuery plugin for displaying pages in a neat overlay
While working on an exciting new web app, I found that I needed a way to show certain pages in an overlay window. This comes handy if you want to reuse something like a sharing or a settings page in different screens of your app.
Google Play’s minimal tabs with CSS3 & jQuery
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 article you’ll learn how to build some new CSS3 & jQuery tabs inspired by Google Play‘s design.
Vertical Showcase Slider with jQuery and CSS Transitions
In this tutorial we will create a very simplistic and responsive product slider for an online store or a portfolio. The idea is to have different sections in a fullscreen view: the image or preview, a navigation and the description. When navigating through the items, we will slide the preview section and the section with the description in opposite directions.