CSS3 will redefine the possibilities in web design and web development more and more. When combined with an action oriented language such as jQuery, the range of effects and applications that can be created are amazing.
There are a lot of jQuery and CSS3 tutorials on the interwebs where newbie as well as professional designers and developers can get some great ideas on how to use both ‘languages’ to create awesome (visual) effects. In this article you will find a fresh and useful collection of tutorials and techniques that make use of cool CSS3 properties and are powered with some jQuery, hope you’ll like my hand-picked collection?
In case you’ll be needing responsive jQuery plugins, please check these posts: 10 Free and Responsive jQuery Slide/Gallery Plugins and jQuery Plugins for Fluid Layouts/Responsive Web Design. But enough babbling for now, let’s hit the road Jack!
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.
Smooth Scrolling to internal links with jQuery
jQuery allows you change the way you interact with your website with very little code. jQuery has an animate function which allows you to animate anything that jQuery does, including scrolling. Animate scrolling creates a better effect to the visitor than to just job to a place on the page.
Item Blur Effect with CSS3 and jQuery
In this tutorial we want to show 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 drwas the attention to the currently hovered item.
Halftone Navigation Menu With jQuery & CSS3
Providing an intuitive, yet eye-catching navigation on your site, is one of the ingredients for a great design. Today we are 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.
Typography Effects with CSS3 and jQuery
Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites. We’ll be using Lettering.js in order to style single letters of the words we’ll be having in our big headlines.
Making a Page Flip Magazine with turn.js
The page flip effect used to be the quintessential Flash animation. 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.
Thumbnail Proximity Effect with jQuery and CSS3
Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear. We will be using the jQuery Proximity plugin by James Padolsey.
CSS3 & jQuery folder tabs
Nice tutorial combining CSS3 and jQuery to create folder tabs. This is just another small example that shows the CSS3 awesomeness. Everything is great also for older browsers, the tabs degrade nice.
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, these elements can be moved in 3D space and create a realistic effect. Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.
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.
Create a Ribbon DropDown Menu with CSS3 and jQuery
Orman Clark’s Vertical Navigation Menu: The CSS3 Version
Next in the Orman Clark’s coded PSD series is his awesome looking Vertical Navigation Menu. We’ll recreate it with CSS3 and jQuery while using the minimal amount of images possible. The only images we’ll be using are for the icons.
Parallax Content Slider with CSS3 and jQuery
A simple parallax content slider with different animations for each slider element and a background parallax effect. 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.
TouchTouch – A Touch Optimized Gallery Plugin
I want to share a little experiment with Tutorialzine readers – TouchTouch. It is a jQuery plugin that turns a collection of photos on a webpage into a touch-friendly mobile gallery. It works on all major browsers (except for IE7 and below) and most importantly is specifically designed with iOS and Android in mind.
Arctext.js – Curving Text with CSS3 and jQuery
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.