10 + Style Effect with CSS and JQuery

1. Hover Slide Effect with jQuery

Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading out or not. When we click on any area, all areas will slide their images out.

Demo | Download

2. Using CSS3 to Create Pretty Buttons

Once upon a time when a web design required a nice, functional and scalable button it needed to be designed in photoshop at first, implemented with the sliding doors technique later and you may have had to spice things up with a little javascript in the end. With CSS3 everything is changing – everything is easier and certainly better

Demo | Download

3. Rotating Image Slideshow w/ CSS3 and jQuery

Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.

Demo | Download

4. Create a Slide-out Panel at the Top of Your Website Using jQuery

In this tutorial we’ll show you how to create a panel with slide-out content at the top of you page using jQuery. It is required that you have basic knowledge in HTML, CSS and jQuery to complete the tutorial.

Demo | Download

5. CSS3 Slideup Boxes

This is using CSS3 transitions and transforms, so browser compatibility should be something like: Safari 3+, Firefox 4+, Opera 10+, Chrome Whatever+

Demo | Download

6. Create a Flip Effect by Using CSS3

There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari and Chrome browser. Here’s a quick look at how the transform property can produce a flip effect, and how it can be used to create a super fancy one!

Demo | Download

7. Animated Portfolio Gallery with jQuery

The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlarged by clicking on it, making it appear as an overlay.

The idea is to animate the content elements whenever a thumbnail is clicked. We will animate the heading from the top, fade out the previous image and slide the descriptions from the sides.

Demo | Download

8. jQuery’s Data Method – How and Why to Use It

jQuery’s data method gives us the ability to associate arbitrary data with DOM nodes and JavaScript objects. This makes our code more concise and clean. As of jQuery 1.4.3 we also have the ability to use the method on regular JavaScript objects and listen for changes, which opens the doors to some quite interesting applications.

Demo | Download

9. jQuery Blinds Slideshow using CSS Sprites

Compatibility Works great on the following browsers:, Firefox 3.5, IE 8, IE 7, IE 6 (imagine my surprise!), Opera 10, Chrome 4, Safari 4

Demo | Download

10. Making Better Select Elements with jQuery and CSS3

This is why, today we are building a script that is going to take an ordinary select element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.

Demo | Download