10 Fresh HTML5 CSS3 and jQuery Tutorials

HTML5 and CSS3 are the next generation of the web, and will redefine the possibilities in web design and web development.  When combined with an action oriented language such as jQuery, the range of effects and applications that can be created are amazing.

In this collection, we’ve gathered up some fresh and useful HTML5 and CSS3 tutorials.  While some are just solely CSS3 tutorials and others HTML5 tutorials, there are also some that combine with jQuery and still others that are HTML5, CSS3 and jQuery tutorials.

If you need more CSS3, HTML5 and jQuery, check out these posts:


Coding a Rotating Image Slideshow with HTML5, 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.

Create a MultiStep Signup form with CSS3 and jQuery

In this tutorial we will see how to create a simple multi-step signup form using CSS3 and jQuery. To spice up things a bit, we will include progress bar with the form, so the users will be able to see the percentage of form completion.

How to Create Social Media Buttons using CSS3

CSS3 is truly amazing. It gives web designers the ability to create flexible and easily reusable design elements, and reduces our reliance on images and graphics editors. This is a guide shows you how to create stylish social media buttons using CSS3, HTML, and some freely available social media icons.

Code a Vibrant Professional Web Design using CSS3 and HTML5

In this second part of this web design tutorial series, we will convert the vibrant and professional design we designed in Part 1. We will use HTML5 and CSS3, as a proof of concept and as a way for you to learn these upcoming W3C standards through practice. We will also use the 960 Grid System to speed up development time.

Designing Search Boxes with HTML5 and CSS3

Smashing Magazine did a piece on Search Boxes which inspired me to write this post. Instead of listing various types of designs, I will show you how to build them!

An Introduction to CSS3 3D Transforms

The CSS 3D Transforms module has been out in the wild for over a year now. Currently, only Safari supports the specification – which includes Safari on Mac OS X and Mobile Safari on iOS.

Create a Cute Popup Bar with HTML5, CSS3 and jQuery

Today we’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user.

Creating Spinning Rays with CSS3 and Javascript

Thomas Fuchs, creator of script2 (scriptaculous’ second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript.  He’s a legend in his own right, and for good reason:  his work has helped to inspire developers everywhere to drop Flash and opt for JavaScript development for smooth UI’s.  One simple effect I enjoy is the script2 website’s rotation of a ray image.  Let me show you how Thomas did it!

Happy Holidays with CSS3

New year is coming and I want to wish all of you Happy Holidays. For this reason, I made a little CSS3 experiment (with absolutely no images) and I hope you’ll enjoy it.

Creating 3D Buttons with CSS3 and jQuery

We’re going to look at how to create a 3D button using very basic CSS and jQuery. This 3D button will better reflect the interactive abilities of many sites. The example that I will be using is from a recent web project that needed a button to toggle a tutorial mode on and off.

Comments 13 Responses

  1. Boost Inspiration January 10, 2011
  2. Dylan January 10, 2011
  3. Red January 11, 2011
  4. Eric Rowell January 11, 2011
  5. erald January 12, 2011
  6. Tutorial Lounge January 13, 2011
  7. SEOservices January 22, 2011
  8. Brett Widmann March 27, 2011
  9. sam March 29, 2011
  10. The Web Square June 30, 2011
  11. Web Design Dubai September 17, 2011
  12. Tams Laborte April 21, 2012

Leave a Comment!