10 + Style Effect with CSS and JQuery

, by , jQuery, CSS3

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.

[download id=”34742″] | View demo | Link Site

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

[download id=”34744″]| View demo | Link Site

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.

[download id=”34746″]| View demo | Link Site

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 (like the one in this page) using jQuery. It is required that you have basic knowledge in HTML, CSS and jQuery to complete the tutorial.

[download id=”34748″]| View demo | Link Site

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+

[download id=”34750″]| View demo | Link Site

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.

[download id=”34754″]| View demo | Link Site

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.

[download id=”34756″]| View demo | Link Site

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

[download id=”34758″]| View demo

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.

[download id=”34760″]| View demo | Link Site

Related

29+ Free Responsive Navigation Menu Plugins & Tutorials

23+ PHP jQuery CSS Poll Vote & Survey Code Script

90+ Free Responsive jQuery Image Slider & Slideshow Download

86+ Useful jQuery CSS3 Loading & Progress Bar Tutorials

45 Free CSS jQuery Drop Down Menu Plugins & Tutorial

Written by

Graham Bill is a professional web designer and developer for both WordPress, Joomla and platform for eCommerce websites.

Feedback Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *