20 Best jQuery And CSS3 Tutorials


In this article you will find some useful selection of tutorials and techniques.
Experimenting with the element() CSS function

1. Why you want to use the :any() CSS selector

any() selector

2 Experimenting with the element() CSS function

Experimenting with the element() CSS function

3. Animated CSS3 helix using 3d transforms

CSS3 3d Helix

4. 3d animation using pure CSS3

3d animation using pure CSS3

5. BonBon Sweet CSS3 buttons


Here we are with these fantastic buttons. There are 3 different materials. A “mate”, “glossy” and a “glass” version. The difference of the later two is that the glass version adds a dark blurry text-shadow which makes it look like you can see trough the button to its bottom.

6. jSlickmenu: A jQuery plugin for slick CSS3 menus


The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It’s fairly easy to use, highly customizable and pretty cool ..

7. A fancy Apple.com-style search suggestion


in this tutorial you can make a search bar like the search bar in Apple website … it’s really helpful advantage for your site ..

8. CSS3 Animated Bubble Buttons:


With this tutorial, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary. you can also add more colours in this buttons by adding more classes.

9. Create Depth And Nice 3D Ribbons Only Using CSS3

10. Coding a 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.

11. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

This week, we are making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases required.
So go ahead and download the example source code and continue with the first step.

12. Custom YouTube Video Player


This tutorial will show you how to create a YouTube video player in any style you want using jQuery.

13. Slide Thumbs

In this post I want to explain how to turn old boring image viewer into a nice-looking one with jQuery. It’s simple just using some lines of java-script code. Implement this and enrich animation features to your web projects

14. Facebox : Facebook-style lightbox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.
It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

15. pure-css-speech-bubbles

16. CSS3 Minimalistic Navigation Menu

17. Form Switcher

In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.

18. Slide out and drawer effect


The effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks.

19. Easily Turn Your Images Into Polaroids with CSS3

20. The Apple.com navigation menu created using only CSS3

The Apple.com navigation menu created using only CSS3