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:
10 Productivity Enhancing CSS and CSS3 Tools and Generators20 Shockingly Cool HTML5 Canvas ApplicationsFresh and Useful HTML TutorialsThe Ultimate HTML5 ToolboxWay Cool CSS3 Typography Experiments30 Awesome jQuery Navigation Menu Tutorials + Plugins10 Awesome CSS3 Techniques You’ll Want to Start UsingThe Ultimate CSS3 Toolbox
Enjoy!
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.
Share this on del.icio.us Bump this on DesignBump Submit this to DesignFloat Digg this! Add this to DZone Share this on Facebook Submit this to FAQpal Post on Google Buzz Share this on Mixx Share this on Reddit Stumble upon something good? Share it on StumbleUpon Share this on Technorati Tweet This! Blend this! Box this on Zabox
Victor Miranda
Professional Ethical Hacker, Pentester & Forensics Investigator MPCS, CEH v8, CSSP, CICP-CICAP HTCIA Member & ISECOM Member Twitter: @victormirandamx