40 jQuery and CSS3 Tutorials and Techniques

In this article you will find a comprehensive selection of tutorials and techniques that make use of some exciting and fresh CSS3 properties and injected this with some innovative jQuery.

You will some truly creative image galleries/sliders, a marvelous selection of innovative navigation techniques, a handful of original form solutions and the rest of the tutorials cover almost all aspects of web design. Hope you find them useful.

Why and how to create Microsoft Office Minibar

Why and how to create Microsoft Office Minibar

In this tutorial you will learn how to recreate a variation of MS Words (2007) toolbar that exposes context-related functionality. When user makes a selection in the input field, a Minibar pops up, semi-transparent, above the selection. It disappears when user clicks anywhere in the input field or performs an action by clicking on a Minibar button.

View the Demo →

Making a Sleek Feed Widget With YQL, jQuery & CSS3

Making a Sleek Feed Widget With YQL, jQuery & CSS3

In this tut you will larn how to build a sleek feed widget, that will fetch any RSS feed and display it in your blog sidebar. You can set it to show the latest blog posts from different categorie, your latest stumbles, or it even display your Twitter mentions.

View the Demo →

A Sexy Vertical Sliding Panel Using jQuery And CSS3

A Sexy Vertical Sliding Panel Using jQuery And CSS3

Here you can learn how to make a vertical sliding panel that will act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it is open.

View the Demo →

Pure CSS3 Bokeh Effect with some jQuery help

Pure CSS3 Bokeh Effect with some jQuery help

IThe bokeh effect is currently a very popular trend amongst designers and in this unique tutorial you will learn how to create a pure CSS3 version of the effect. With some help from jQuery, you can add some randomness the the colors, sizes and vary the positions of the effect.

View the Demo →

Create a Nifty Dynamic Shadow with jQuery

Create a Nifty Dynamic Shadow with jQuery

Here, Daniel Kurdoghlian, will show you how to recreate the very nifty looking dynamic shadow effect he created for his very popular CSS3 and jQuery experiment. He walks you through every step of the tutorial by using a few teaspoons of jQuery, a pinch of CSS and some transparent PNG’s as Base.

View the Demo →

Create A Multiple URL Shortener Page

Create A Multiple URL Shortener Page

In this tutorial, you'll be shown how to create a simple page that will show short urls created by multiple url shortener services. You'll be using HTML5, CSS3 for styling as well as jQuery for working with Ajax.

View the Demo →

Feature Table Design

Feature Table Design

In this experimental tutorial you will learn how to recreate the 'sexy' table design from Shopify, firstly in Photoshop and then in HTML/CSS.

View the Demo →

Simple AJAX Commenting System

Simple AJAX Commenting System

In this tutorial you will learn how to build a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.

View the Demo →

Beautiful Looking Custom Dialog Box With jQuery and CSS3

Beautiful Looking Custom Dialog Box With jQuery and CSS3

This dialog box uses CSS3 drop shadow and a completely CSS3 styled button. So, latest version of Chrome, Firefox and Safari will have no problems with it, but for IE6 and 7, the script will work but the display of the dialog box will look plain, no rounded border, drop shadow and gradient.

View the Demo →

Colorful Rating System with CSS3

Colourful Rating System with CSS3

By using the jQuery Color plugin, you can animate colors. Simply use the animate() function from jQuery to have colours fade to another colour. When using this technique, combined with some CSS3 features (rounded corners and drop shadow), you can create a Colorful rating system.

View the Demo →

A Colorful Clock With CSS & jQuery

A Colorful Clock With CSS & jQuery

You will learn how to build a highly original colorful jQuery & CSS clock using Tutorialzines very own jQuery plug-in – tzineClock.

View the Demo →

jQuery DJ Hero

jQuery DJ Hero

Remember jTypingHero? This was a fun little game to test your typing skills based on the ever popular Guitar Hero. By combining CSS3 and jQuery, you will create, in this experimental tutorial, two records that you can start spinning (faster and slower) and even scratching is enabled.

View the Demo →

Floated lists with CSS3 and jQuery

Floated lists with CSS3 and jQuery

In this quick tutorial, the developer is going to explain how you can have a nicely floated list of items and you will use jQuery to make sure IE understands it too.

View the Demo →

Cross-Browser Rounded Buttons with CSS3 and jQuery

Cross-Browser Rounded Buttons with CSS3 and jQuery

View the Demo →

CSS3 & jQuery Image Gallery and Slider Tutorials

An Awesome CSS3 Lightbox Gallery With jQuery

An Awesome CSS3 Lightbox Gallery With jQuery

In this tutorial you are going 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 lightbox gallery around it.

View the Demo →

Interactive Photo Desk with jQuery and CSS3

Interactive Photo Desk with jQuery and CSS3

In this little experiment you will create an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.

View the Demo →

Making a Mosaic Slideshow With jQuery & CSS

Making a Mosaic Slideshow With jQuery & CSS

When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. In this technique you will be making a jQuery & CSS mosaic gallery, featuring an interesting tile transition effect when moving from one slide to another.

View the Demo →

Beautiful Photo Stack Gallery with jQuery and CSS3

Beautiful Photo Stack Gallery with jQuery and CSS3

In this tutorial you are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, you show the images of that album as a beautiful photo stack. In the photo stack view, you can browse through the images by putting the top most image behind all the stack with a slick animation.

View the Demo →

Awesome Image Gallery using CSS3 and jQuery

Awesome Image Gallery using CSS3 and jQuery

The simple CSS3 image gallery (with jQuery) you will be building will be slightly tilted to the side and on hover will move and whenever you click on the image a lightbox will pop out with the larger version of the image.

View the Demo →

Kick-Ass jQuery & CSS3 Gallery With Animated Shine Effects

Kick-Ass  jQuery & CSS3 Gallery With Animated Shine Effects

You will be shown how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.

View the Demo →

Interactive Image Vamp up with jQuery, CSS3 and PHP

Interactive Image Vamp up with jQuery, CSS3 and PHP

In this technique you will be shown how to create an online application for giving some funny touches to an image, using jQuery and jQuery UI for dragging and resizing little bling elements like mustaches and glasses. With PHP the image and the bling elements will get merged and the end result can be viewed.

View the Demo →

Recreating the MLB.com Content Switcher

Recreating the MLB.com Content Switcher

The goal of this project is to try to recreate the Flash content switcher from MLB.com, using jQuery and CSS3 and without any extraneous images or other non-essential elements that tend to make stuff less maintainable.

View the Demo →

Elegant Accordion with jQuery and CSS3

Elegant Accordion with jQuery and CSS3

Here you will create an elegant accordion for your sites content. The idea is to have some vertical accordion tabs that slide out when hovering. You will add some CSS3 properties to enhance the looks.

View the Demo →

Pretty Simple Content Slider

Pretty Simple Content Slider

You will learn how to create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out.

View the Demo →

CSS3 & jQuery Image Effects

Image Highlighting and Preview with jQuery

Image Highlighting and Preview with jQuery

In this tutorial you will be shown how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow users to view a bigger version of an image that is relevant to some context.

View the Demo →

CSS3 Rounded Image With jQuery

CSS3 Rounded Image With jQuery

In this tutorial you will learn how to give an image rounded corners using the CSS3 border-radius and box-shadow properties and using jQuery to automatically wrap a span tag around the image.

View the Demo →

Apple-like Retina Effect With jQuery

Apple-like Retina Effect With jQuery

In this tutorial you will learn the technique of turning a static image into a fully functional “Retina effect” with only jQuery and CSS.

View the Demo →

CSS3 & jQuery Menu and Navigation Tutorials

Contextual Slideout Tips With jQuery & CSS3

Contextual Slideout Tips With jQuery & CSS3

With this tut you will learn how to make a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.

View the Demo →

How to Create a Drop-down Nav Menu

How to Create a Drop-down Nav Menu

In this tutorial, you’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. You’ll also use jQuery to handle the effects and add the finishing touches for us.

View the Demo →

Awesome CSS3 & jQuery Slide Out Button

Awesome CSS3 & jQuery Slide Out Button

The inspiration for that button came from Photoshop.com where Flash is used to create a nice slide out effect. This button does not behave exactly the same, but the effect is quite neat. It does not use any images and uses the border radius property to make the rounded borders.

View the Demo →

A Fresh Bottom Slide Out Menu with jQuery

A Fresh Bottom Slide Out Menu with jQuery

In this tutorial you will create a unique bottom slide out menu. This large menu will contain the title and a description of the menu item and it will slide out from the bottom revealing the description text and icons. You will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

View the Demo →

Sweet AJAX Tabs

Sweet AJAX Tabs

Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. In this tutorial you will be making an AJAX-powered tab page with CSS3 and version 1.4 of jQuery

View the Demo →

Nice And Simple Toolbar For Your Website

Nice And Simple Toolbar For Your Website

In this tutorial you’ll learn how to build a nice toolbar for your website using some CSS3 properties and basic jQuery techniques.

View the Demo →

CSS3 Styled jQuery Dropdown

CSS3 Styled jQuery Dropdown

View the Demo →

Create a "Stay-On-Top" Menu with CSS3 and jQuery

Create a "Stay-On-Top" Menu with CSS3 and jQuery

View the Demo →

Create Your Own Dashboard Menu

Create Your Own Dashboard Menu

In this tutorial you are going to create your very own dashboard menu similar to Leopards dashboard.

View the Demo →

Halftone Navigation Menu

Halftone Navigation Menu

In this tut you will be making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

View the Demo →

Create Accordion Menu Using CSS3 Transitions

Create Accordion Menu Using CSS3 Transitions

There are many ways to create an accordion menu, most of them use a javascript library like jQuery to make the effect runs cross browsers. In this tutorial, you'll see how to make an accordion menu using CSS3 transitions.

View the Demo →

CSS3 Glow Tabs

CSS3 Glow Tabs

You will learn how to recreate the 'hover glow tabs' from the jQuery Conference page, which has a nice “glowing” rollover effect along with a subtle inner shadow at the bottom of the inactive tabs and also applied some rounded corners and gradients to complete a very nice effect.

View the Demo →

Mac-style Skype Application Menu

Mac-style Skype Application Menu

Using CSS3 and jQuery for extra functionality you will learn how to recreate the amazing slick Skype (for Mac) layout. (Not the full layout: Only the menu where all your friends are listed).

View the Demo →

Author: (586 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments

Blog comments powered by Disqus